AngularJS - Closing a modal window

Question

My inclusions:

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

I am using AngularJS and Twitter Bootstrap.

From AngularJS, I open a modal window as follows:

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

My modal template:

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

Question:
Close button [x] does not work
When I click on it, the modality does not disappear. But when I press Esc, the modality disappears.
It looks like ... data-reject = "modal" does not work. Any ideas?

Answer 1

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

UI Bootstrap will not bind to this close button because it is not looking for this attribute, you need to add ng-click and reject the modal, as in the examples

http://angular-ui.imtqy.com/bootstrap/#/modal

in the controller:

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

Modal template ...

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

Answer 2

In angular, there is a close $modalInstance method to close an open modal window.

Controller:

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

Answer 3

I did it like this using jQuery with Angular:

 jQuery('#YOURMODALID').modal('hide');