http://angular-ui.github.io/bootstrap/

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
    <script src="example.js"></script>
    <script src="example2.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
       
        
         <form name = "addFriendForm">
          <input ng-model = "user.name"class="form-control" type = "text" placeholder="Username" title=" Username" />
          {{ user.name }}
        </form>
        
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Add Friend</button>
    <div> Username: {{user.name}}</div>
</div>
  </body>
</html>

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo')
  .controller('ModalDemoCtrl', ['$scope', '$rootScope', '$modal', '$modalStack', '$filter', '$log',
    function($scope, $rootScope, $modal, $modalStack, $filter, $log) {

      $scope.user = {
        name: "testInit2"
      }

      $scope.open = function() {

        var modalInstance = $modal.open({
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          resolve: {
            user: function() {
              return $scope.user;
            }
          }
        });

        modalInstance.result.then(function(data) {
          $scope.user = {
            name: data
          };


          console.log($scope.user);
        }, function() {
          $log.info('Modal dismissed at: ' + new Date());
        });
      };
    }
  ]);

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.


angular.module('ui.bootstrap.demo')
.controller('ModalInstanceCtrl',[ '$scope','$modal' , '$modalInstance', 'user', function ($scope, $modal, $modalInstance, user) {

  $scope.user = user;
  console.log($scope.user);

  $scope.ok = function () {
    $modalInstance.close($scope.user.name);
    
    var modalInstance = $modal.open({
          templateUrl: 'modal2.html',
          controller: 'ModalInstanceCtrl',
          resolve: {
            varTest: function() {
              return "OK";
            }
          } 
          
        });
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
}]);

/*
angular.module('ui.bootstrap.demo')
.controller('ModalInstanceCtrl', function ($scope, $modalInstance, user) {

  $scope.user = user;
  console.log($scope.user);

  $scope.ok = function () {
    $modalInstance.close($scope.user.name);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});*/

<div>
  TESTE MODAL:
  
  <b>{{varTest}}</b>
</div>