Ionic 1 - Popup not working properly after state change

Question

I have an $ionicPopup defined inside a particular controller say Controller-1. When I move to Controller-1 from any other different Controller-X by changing the state as $state.go('xxx.xx.xx'), the $ionicPopup is not working as expected. But at the same time, if I open Controller-1 for the first time, $ionicPopup works fine. State change is causing issue. How to solve it?

The code for $ionicPopup inside Controller-1 is:

$ionicPopup.show({
title: "Delivery Not Available",
subTitle: 'Selected area is beyond our delivering area. You can place only Take Away orders.',
scope: $scope,
buttons: [{
        text: 'Cancel',
        onTap: function(e) {
            return true;
        }
    },
    {
        text: '<b>OK</b>',
        type: 'button-balanced',
        onTap: function(e) {
            $state.go('home.app');
        }
    },
]});

If I directly launch it from Controller-1 for the first time, it works as expected: Screenshot - Normal Case

But, if I move to Controller-1 from any other state through a state change using $state.go('xxx.xx.x'), it shows broken output: Screenshot - Failing Case

Answer 1

Make a function like this for your popup and Call that Function in your success callback function and make sure you have this code in the same controller in which success callback is written

$scope.showConfirm = function() {

      var confirmPopup = $ionicPopup.confirm({
         title: 'Title',
         template: 'Are you sure?'
      });

      confirmPopup.then(function(res) {
         if(res) {
            console.log('Sure!');
         } else {
            console.log('Not sure!');
         }
      });

   };

Refer this link for more details on Ionic Popup