How to catch 'modal.hidden' with multiple modal


Now, I have two modal,modal A and modal B. I want to do something when modal A is hidden.
I can catch the modal.hidden event by the following code

$scope.$on('modal.hidden', function() {
      // do something

But the function is fired when modal A or modal B is hidden… How can I know that is modal A hide fired the function?


Hi Fenglu,

You can try the below. Make sure you assign an id to each modal to make it easy.

$scope.$on('modal.hidden', function(event, modal) {
    console.log('Modal ' + + ' is hidden!');

Ionic event for when modal is closed by clicking outside

Hi reddyshyam, thanks for your reply. You way didn’t work. There is no id property in modal object.
I have solved it by the following way.
Add a name property when the modal is create such as $ = 'modalA' .

$scope.$on('modal.hidden', function(event, modal) {
     if( === 'modalA') {
        // do something


Hi Fenglu,

Glad you got it working. You can assign ID when you are defining a modal. Please find an example below. Hope this helps.

$ionicModal.fromTemplateUrl('templates/yourmodal.html', {
    id: '1', // We need to use and ID to identify the modal that is firing the event!
    scope: $scope,
    animation: 'slide-in-up',
    backdropClickToClose : false
}).then(function(modal) {        
  $scope.taskModal1 = modal;


hi reddyshyam, Yes, this is the perfect solution to solved this problem. Thanks for you help.


You are welcome! :slight_smile: Have a good day!