//1. a dialog and its click button:

  show

  
     username: {{username}}, and title: {{title}}.
  


//2. dialog widget:
<script type="text/ng-template" id="my-dialog.html">
<div ng-show="visible">
  <h3>{{title}}</h3>
  <div class="body" ng-transclude></div>
  <div class="footer">
    <button ng-click="onOk()">Save changes</button>
    <button ng-click="onCancel()">Close</button>
  </div>
</div>
</script>

angular.module('app', []).
  directive('dialog', function() {
   return {
    transclude: true, // we want to insert custom content inside the directive
    scope: {
        title: '@', // the title uses the data-binding from the parent scope
        onOk: '&',  // create a delegate onOk function
        onCancel: '&',  // create a delegate onCancel function
        visible: '='  // set up visible to accept data-binding
    },
    restrict: 'E',
    replace: true, // Replace with the template below
    templateUrl: 'my-dialog.html'
  }
  })
  .controller('appController', function($scope) {
	$scope.name = 'tester';
	$scope.title = 'Show Dialog';
	$scope.doSomething = function() {
	  alert('do something!');
  }
});