Button in ng-repeat item cause $ionicModal to be destroyed prematurely


#1

BACKGROUND

I have a list of cards generated using ng-repeat. Each card has a button at the card bottom calling a function edit(). edit() would open up a modal window.

<div class="card" ng-repeat="item in list">
  <div class="item item-text-wrap">
    <h2>{{ item.title }}</h2>
    <p>{{ item.description }}</p>
  </div>

  <a class="item item-icon-left positive" ng-click="edit($index)">
    <i class="icon ion-edit"></i>
    Edit
  </a>
</div>

The function edit() opens a $ionicModal dialog box that slides in.

$scope.edit = function(index) {
  $scope.selected = index;
  $scope.openModal(); // This is from the $ionicModal example. See below.
};

I also copied in the example from ionicModal

  $ionicModal.fromTemplateUrl('edit-modal.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  // Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
    console.log("model removed.");
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });

PROBLEM DESCRIPTION

The problem is that when I press the card’s button, which calls the ng-click handler edit function, the modal slides in as expected but then immediately slides out again. I check the JavaScript console window and notice the “model removed.” line printed, indicating the below was triggered/called.

$scope.$on('$destroy', function() {
  $scope.modal.remove();
  console.log("model removed.");
});

Obviously, somehow Ionic felt something had been destroyed or went out of scope. It then recursively triggered off the destroy event for the modal.

I am guessing if the ng-repeat card item goes out of scope once its button is pressed, it triggers off Ionic to destroy the modal window associated with or called by it.

EXPERIMENT

To test if it is something to do with the ng-repeat, I created a button outside of the ng-repeat loop but in the ion-content, which calls edit() with a hard coded index parameter.

<button ng-click="edit(0)">Test open modal</button>

For this test, it works OK as expected. The modal opens, stays there and doesn’t disappear.

QUESTION

So any idea why a button link generated in the ng-repeat triggers a premature destruction of the modal window? Whereas a button outside ng-repeat doesn’t?