AngularJS+UI Bootstrap: Simple Dialog

Simple Dialog example by AngularJS and UI Bootstrap.

HTML

<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script src="https://raw.github.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-0.2.0.min.js"></script>
<script src="https://raw.github.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.2.0.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 <person></person>

JavaScript

angular.module("myApp", ['ui.bootstrap']);
angular.module("myApp").directive("person", function($dialog) {
    return {
        restrict: "E",
        template: '<button class="btn btn-primary" ng-click="openDialog()" >search</button>',
        replace: true,
        scope: {
            myPerson: '='
        },
          controller: function ($scope)
        {            
            var tpl = '<search-person />';
            
            $scope.opts = {
                backdrop: true,
                keyboard: true,
                backdropClick: true,
                template: tpl,
                controller: 'myController'
            };
            
            $scope.openDialog = function () {
                var d = $dialog.dialog($scope.opts);
                d.open().then(function (result) {
                    if (result) {
                        alert('dialog closed with result: ' + result);
                    }
                });
            }                    
        }
    }}).directive("searchPerson", function ($dialog) {
    return {
        restrict: "E",
        template: '<div class="modal-header">   <span> test value is: {{testValue}}</span>  </div><div class="modal-body">     </div><div class="modal-footer">  <button ng-click="close(result)" class="btn btn-primary">Close</button></div>',
        scope: {},
      
        controller: myController
                  
        
    }
});

function myController($scope, $dialog){
      $scope.testValue = 2;
            
            $scope.close = function (result)
            {
                $dialog.close(result);
            }
}