AngularJS - Closing Modal Window

Question

My includes are:

bootstrap.css [ getbootstrap.com/2.3.2 ]
angular/ui-bootstrap-tpls-0.10.0.min.js from: [ angular-ui.github.io/bootstrap ]

I am using AngularJS and Twitter Bootstrap.

From AngularJS I open the modal window as follows:

var modalInstance = $modal.open({
              templateUrl: 'resources/html/mymodal.html',
              controller: 'mymodalController',
              scope: $scope
            });

My Modal Template is:

<div class="modal">
<
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
  </div>
.....
</div>

Question:
The close [x] button is not working
When I click on it, the modal does not go away. But when I press Esc - the modal vanishes.
So looks like ... data-dismiss="modal" is not working. Any ideas?

Solution 1

the data-dismiss attribute is used by the bootstrap javascript (as I see you got the html source code from, http://getbootstrap.com/javascript/#modals )

UI Bootstrap won't be binding to that close button because it isn't looking for that attribute, you need to add an ng-click and dismiss the modal like in the examples

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

in controller:

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

Modal template...

<button class="btn btn-warning" ng-click="cancel()">Cancel</button>

Solution 2

In angular, there is a close method of $modalInstance to close a opened modal window .

Controller :

  $scope.closeMyPopup = function () {
    $modalInstance.close();
  };