How to close Angular UI Modal from anywhere

Question

I am using the Angular UI bootstrap modal dialog and create it within a service:

myApp.factory('ModalService', ['$modal', function($modal) {     return {         trigger: function(template) {             $modal.open({                 templateUrl: template,                 size: 'lg',                 controller: function($scope, $modalInstance) {                     $scope.ok = function() {                         $modalInstance.close($scope.selected.item);                     };                     $scope.cancel = function() {                         $modalInstance.dismiss('cancel');                     };                 }             });         },         close: function() {             // this should close all modal instances         }     }; }]); 

How can I close all modal instances when calling ModalService.close() from a controller or whatsoever?

Answer 1

Inject the $modalStack service and call the function $modalStack.dismissAll(), see the code on GitHub for details:

myApp.factory('ModalService', ['$modal', '$modalStack' function($modal, $modalStack) {     return {         trigger: function(template) {             $modal.open({                 templateUrl: template,                 size: 'lg',                 controller: function($scope, $modalInstance) {                     $scope.ok = function() {                         $modalInstance.close($scope.selected.item);                     };                     $scope.cancel = function() {                         $modalInstance.dismiss('cancel');                     };                 }             });         },         close: function(reason) {             $modalStack.dismissAll(reason);         }     }; }]);