How to Dismiss angular modal on URL change ?

Requirement :-
We have a Angular bootstrap Modal to show a popup window. On clicking backspace / browser back button, we want to cancel the popup and continue with the url change. The default behaviour is that page behind the modal changes, but the modal remains on top.
Plunker link for issue 
GitHub issue

Solution :- 

We have seen lot of people facing this challenging scenario . To overcome this issue is to write a directive in Angular JS.


app.directive('discardModal', ['$rootScope', '$modalStack',
function($rootScope, $modalStack) {
return {
restrict: 'A',
link: function() {
* If you are using ui-router, use $stateChangeStart method otherwise use $locationChangeStart
* StateChangeStart will trigger as soon as the user clicks browser back button or keyboard backspace and modal will be removed from modal stack
$rootScope.$on('$stateChangeStart', function (event) {
var top = $modalStack.getTop();
if (top) {


One thought on “How to Dismiss angular modal on URL change ?”

Leave a Reply

Your email address will not be published. Required fields are marked *