<div class="panel panel-default">
  <div class="panel-heading">Modal from embedded template</div>
  <div class="panel-body">
    <div>
      <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
      <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
      <div ng-show="selected != null">Selected: {{ selected }}</div>
    </div>
  </div>
</div>

library WpDartExample.modalemb;

import 'package:angular/angular.dart';
import 'package:angular_ui/angular_ui.dart';

@Component(
  selector: 'modalemb-demo', 
  useShadowDom: false,
  templateUrl: 'modalemb_demo.html',
  exportExpressions: const ["tmp", "ok"]
)
class ModalembDemoComponent implements ScopeAware {
  List<String> items = ["item1", "item2", "item3", "item4"];
  String selected;
  String tmp;
  
  Modal modal;
  ModalInstance modalInstance;
  Scope scope;
  
  String template = """
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h4 class="modal-title">I'm a modal!</h4>
</div>
<div class="modal-body">
  <ul>
    <li ng-repeat="item in items">
      <a ng-click="tmp = item">{{ item }}</a>
    </li>
  </ul>
  Selected: <b>{{tmp}}</b>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary" ng-click="ok(tmp)">OK</button>
</div>
""";
  
ModalembDemoComponent(this.modal);
  
  ModalInstance getModalInstance(size) {
    return modal.open(new ModalOptions(template:template,size:size), scope);
  }
  
  void open(size) {
    modalInstance = getModalInstance(size);
    
    modalInstance.opened
      ..then((v) {
        print('Opened');
      }, onError: (e) {
        print('Open error is $e');
      });
    modalInstance.close = (result) { 
      selected = result;
      print('Closed with selection $selected');
      modal.hide();
    };
    modalInstance.dismiss = (String reason) { 
      print('Dismissed with $reason');
      modal.hide();
   };
  }
  
  void ok(sel) {
    modalInstance.close(sel);
  }
}

<script type="text/ng-template" id="template_2.html">
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h4 class="modal-title">I'm a modal!</h4>
</div>
<div class="modal-body">
  <ul>
    <li ng-repeat="item in items">
      <a ng-click="tmp = item">{{ item }}</a>
    </li>
  </ul>
  Selected: <b>{{tmp}}</b><br>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary" ng-click="ok(tmp)">OK</button>
</div>
</script>

<div class="panel panel-default">
  <div class="panel-heading">Modal from template page</div>
  <div class="panel-body">
    <div>
      <button class="btn btn-default" ng-click="openUrl('template_2.html','sm')">Small modal</button>
      <button class="btn btn-default" ng-click="openUrl('template_2.html','lg')">Large modal</button>
      <div ng-show="selected != null">Selected: {{ selected }}</div>
    </div>
  </div>
</div>

library WpDartExample.modalext;

import 'package:angular/angular.dart';
import 'package:angular_ui/angular_ui.dart';

@Component(
  selector: 'modalext-demo', 
  useShadowDom: false,
  templateUrl: 'modalext_demo.html',
  exportExpressions: const ["tmp", "ok"]
)
class ModalextDemoComponent implements ScopeAware {
  List items = ["Java", "Dart", "JavaScript", "Ruby"];
    
  String selected;
  String tmp;
  String other;
  
  Modal modal;
  ModalInstance modalInstance;
  Scope scope;
  
  ModalextDemoComponent(this.modal) {
  }
  
  void openUrl(String templateUrl, String size) {
    modalInstance = modal.open(new ModalOptions(templateUrl:templateUrl, size: size), scope);
    
    modalInstance.result
      ..then((value) {
        selected = value;
        print('Closed with selection $value');
      }, onError:(e) {
        print('Dismissed with $e');
      });
  }
  
  void ok(sel) {
    modalInstance.close(sel);
  }
}