title: Ionic - when should ionicModal.remove() be called? [Ionic Modal Hide Callback]
body: <p>In my controller, modal views are initialized with a factory by listening to the <code>$ionicView.afterEnter</code> event. As the <a href="http://ionicframework.com/docs/api/controller/ionicModal/" rel="nofollow noreferrer">documentation</a> suggests, modal views should be removed whenever the current active ionic view is about to be destroyed. A function is called in the <code>$ionicView.beforeLeave</code> callback in order to remove the modal views.</p>
  
  <pre><code>.controller('UserProfileCtrl', function($scope, $state, user, ModalFactory) {
      $scope.user = user;
  
      $scope.checkOrders = function() {
          $state.go('app.orders');
      };
  
      $scope.$on('$ionicView.afterEnter', function() {
          $scope.modals = ModalFactory.getUserProfileModals($scope, user.photos);
      });
  
      $scope.$on('$ionicView.beforeLeave', function() {
          $scope.modals.remove();
      });
  });
  
  .factory('ModalFactory', function($ionicModal, $ionicSlideBoxDelegate) {
      var modalFactory = {};
  
      modalFactory.getUserProfileModals = function(scope, images) {
          var modals = {
              'views': [],
              'data': []
          };
  
          $ionicModal.fromTemplateUrl('templates/modals/common/image-view.html', { 'scope': scope }).then(function(modal) { modals.views.imageView = modal; });
  
          if (images) {
              modals.data.images = images;
          }
  
          modals.open = function(view, slide) {
              Object.keys(this.views).forEach(function(key, index) {
                  console.log(key);
              });
  
              if (view &amp;&amp; this.views.hasOwnProperty(view)) {
                  this.views[view].show();
  
                  if (view == 'imageView' &amp;&amp; slide) {
                      $ionicSlideBoxDelegate.$getByHandle('image-view').slide(slide);
                  }
              }
          };
  
          modals.close = function(view) {
              Object.keys(this.views).forEach(function(key, index) {
                  console.log(key);
              });
  
              if (view &amp;&amp; this.views.hasOwnProperty(view)) {
                  this.views[view].hide();
              } else {
                  Object.keys(this.views).forEach(function(key, index) {
                      this.views[key].hide();
                  });
              }
          };
  
          modals.remove = function() {
              console.log('remove');
              Object.keys(this.views).forEach(function(key, index) {
                  console.log(key);
              });
  
              this.data.splice(0, this.data.length);
  
              Object.keys(this.views).forEach(function(key, index) {
                  this.views[key].remove();
              });
  
              this.views.splice(0, this.views.length);
          };
  
          return modals;
      };
  
      return modalFactory;
  });
  </code></pre>
  
  <p>However, I get the following output in the console when I execute these actions in sequence:</p>
  
  <ol>
  <li>call <code>$scope.modals.open('imageView', 1)</code>,</li>
  <li>call <code>$scope.modals.close()</code>,</li>
  <li>navigate to another page with <code>$state.go('app.orders')</code>.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/lo3JX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lo3JX.png" alt="Screenshot showing console output"></a></p>
  
  <p>I tried listening to <code>$destroy</code> instead of <code>$ionicView.beforeLeave</code>, but then <code>$scope.modals.remove()</code> is not called at all. It seems <code>$destroy</code> is not fired when I am testing my application with Chrome.</p>
  
  <p>Can anyone tell me when should I remove the modal views, and why is there such an error message in my scenario?</p>
  
  <hr>
  
  <h2>Update</h2>
  
  <p>After I modified the code in <code>ModalFactory</code> as follows, the error is gone.</p>
  
  <pre><code>function open(view, slide) {
      if (view &amp;&amp; modals.views.hasOwnProperty(view)) {
          modals.views[view].show();
  
          if (view == 'imageView' &amp;&amp; slide) {
              $ionicSlideBoxDelegate.$getByHandle('image-view').slide(slide);
          }
      }
  };
  
  function close(view) {
      if (view &amp;&amp; modals.views.hasOwnProperty(view)) {
          modals.views[view].hide();
      } else {
          Object.keys(modals.views).forEach(function(key, index) {
              modals.views[key].hide();
          });
      }
  };
  
  function remove() {
      console.log('remove');
  
      modals.data.splice(0, modals.data.length);
  
      Object.keys(modals.views).forEach(function(key, index) {
          modals.views[key].remove();
      });
  
      modals.views.splice(0, modals.views.length);
  };
  
  modals.open = open;
  modals.close = close;
  modals.remove = remove;
  
  return modals;
  </code></pre>