Close only one current modal using $modalStack in Ui Bootstrap

Question

I'm using a solution found here: How to close Angular UI Modal from anywhere to close a UI bootstrap modal that I'm using as an HTTP interceptor to show loading.

However, this solution closes ALL open modals since $modalStack.dismissAll() is being used. How do I remove only the modal that's open with the loading. Here's my code:

app.factory('loadingModal', ['$modal', '$modalStack', function($modal, $modalStack) {
    return {
        trigger: function(template) {
            $modal.open({
                windowClass: 'modal fade loading-modal',
                templateUrl: '/assets/partials/modals/loadingModal.html',
                backdrop: 'static',
                controller: function($scope, $modalInstance) {
                    $scope.ok = function() {
                        $modalInstance.close($scope.selected.item);
                    };
                    $scope.cancel = function() {
                        $modalInstance.dismiss('cancel');
                    };
                }
            });
        },
        close: function(reason) {
            $modalStack.dismissAll(reason);
            // $modal.close();
        }
    };
}])

Answer 1

Not totally clear how you are using this in interceptor but you should be able to return the instance from trigger and then use instance.dismiss()

app.factory('loadingModal'.....
    return {
        trigger: function(template) {
           // return this instance
           return $modal.open({.....

        ......
  }

Then store instance wherever you intialize trigger() in interceptor

var modal = loadingModal.trigger('tmpl.html');

Then to close

modal.dismiss();

Of course you could store this instance in service and create a method to close it with a service method also