Prevent UI-Bootstrap Modal from closing when clicking buttons

NB: this only affects Angular 1

Original Source: StackOverflow

With form editing aside from validating user’s input we always want to provide users any indication of errors that occurred from the server. So I recently ran into a case where I needed to keep UI-Bootstrap’s Modal visible while the form is processing to prevent the user having to open the modal again.

In a nutshell, this required listening for the ‘modal.closing’ in the modal’s $scope.

$scope.$on('modal.closing', function(event, reason, closed) {
    var r = prompt("Are you sure you wanna close the modal? (Enter 'YES' to close)");
    if (r !== 'YES') {
    event.preventDefault();
    }
});