Is there a way to automatically close Angular UI Bootstrap modal when route changes?

If you want all the opened modals to be closed whenever a route is changed successfully, you could do it in one central place by listening to the $routeChangeSuccess event, for example in a run block of your app:

var myApp = angular.module('app', []).run(function($rootScope, $uibModalStack) {  $uibModalStack.dismissAll();}); 

Here you can see that the $uibModalStack service gets injected on which you can call the dismissAll method - this call will close all the currently opened modals.

So, yes, you can handle modals closing centrally, in one place, with one line of code :-)

A better way is to see that whenever a Popup (Modal) is open, on Browser Back button click (or Keyboard Back), we stop the URL change and just close the Popup. This works for a better User Experience in my Project.

The Browser Back button works normally if there is no Modal opened.

use:

$uibModalStack.dismiss(openedModal.key);

or

$uibModalStack.dismissAll;

Sample code:

.run(['$rootScope', '$uibModalStack',    function ($rootScope,  $uibModalStack) {               // close the opened modal on location change.        $rootScope.$on('$locationChangeStart', function ($event) {            var openedModal = $uibModalStack.getTop();            if (openedModal) {                if (!!$event.preventDefault) {                    $event.preventDefault();                }                if (!!$event.stopPropagation) {                    $event.stopPropagation();                }                $uibModalStack.dismiss(openedModal.key);            }        });    }]);

I don't actually use Angular UI Bootstrap, but from looking at the docs, it looks like there is a close() method on the $modalInstance object.

So taking the example from the docs, this should work:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {    $scope.items = items;    $scope.selected = {        item: $scope.items[0]    };    $scope.ok = function () {        $modalInstance.close($scope.selected.item);    };    $scope.cancel = function () {        $modalInstance.dismiss('cancel');    };    // this will listen for route changes and call the callback    $scope.$on('$routeChangeStart', function(){        $modalInstance.close();    });};

Hope that helps.