title: Collection-Repeat and $ionicModal Strange Behavior
body: <p>I am making a directory app that comprises roughly 200 list items (employees).  The app worked as intended using ng-repeat, however, it was sluggish to load.  I switched to Collection-Repeat to take advantage of the speed boost but I am getting bizarre behaviors that I can't figure out.</p>
  
  <p>The list items are rendering correctly, alphabetically with the category titles added successfully.  The problem is, each list item has a ng-click attribute that opens an $ionicModal.  The modal for each item opens, but the loaded data is incorrect.  </p>
  
  <p>When the modal opens, it starts at the bottom of the page - I can see the contents for half a second before it animates to the middle of the screen.  To start, the loaded data is correct.  As it animates, it switches to another employees data.  I can't seem to figure out why.  I'm new to angular/ionic so any pointers would be great.  Thanks!</p>
  
  <p><strong>EDIT - Out of curiousity, I added a second <code>ng-controller="ModalCtrl" ng-click="openModal();"</code> to each element as a button.  Clicking on the element does the usual - opens the modal with the wrong employee.  Clicking on the newly created button however creates TWO modals (stacked on eachother) BOTH with the correct employee.  Removing either instance to the ng-controller or ng-click puts me back at square one with only one modal of incorrect data.  Why is this?  Why does adding a second ng-click correct the problem (despite having two modals)?</strong></p>
  
  <p><strong>EDIT - Here is a link to a codepen sample (dumbed down, but proves my issue:</strong> <a href="http://codepen.io/anon/pen/zijFv?editors=101" rel="nofollow">http://codepen.io/anon/pen/zijFv?editors=101</a></p>
  
  <p>My HTML looks like this:</p>
  
  <pre><code>&lt;div class="list"&gt;
     &lt;a class="item my-item"            
        collection-repeat="row in contacts"
        collection-item-height="getItemHeight(row)"
        collection-item-width="'100%'"
        ng-class="{'item-divider': row.isLetter}"&gt;
  
        &lt;!-- ADDED BUTTON SEE EDIT COMMENT ABOVE --&gt;
        &lt;button ng-if="!row.isLetter" ng-controller="ModalCtrl" ng-click="openModal();"&gt;Click&lt;/button&gt;
  
        &lt;img ng-controller="ModalCtrl" ng-click="modal.show()" ng-if="!row.isLetter" ng-src="data:image/jpeg;base64,{{row.image}}"&gt;
        &lt;h2&gt;{{row.title || (row.firstname+' '+row.lastname)}}&lt;/h2&gt;
        &lt;p ng-if="!row.isLetter"&gt;&lt;em&gt;{{row.jobtitle}}&lt;/em&gt;&lt;/p&gt;                   
     &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My Modal HTML is this:</p>
  
  <pre><code>&lt;header class="bar bar-header bar-lsi"&gt;
    &lt;h1 class="title"&gt;Contact Information&lt;/h1&gt;
    &lt;div class="button button-clear" ng-click="closeModal()"&gt;
      &lt;span class="icon ion-close"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  
  &lt;ion-content has-header="true" style="margin-top: 0px !important;"&gt;        
  
    &lt;div class="list card" style="border-radius: 0px !important;"&gt;
  
       &lt;div class="item item-avatar item-text-wrap"&gt;
         &lt;img ng-src="data:image/jpeg;base64,{{row.image}}"&gt;
         &lt;h2&gt;{{row.firstname}} {{row.lastname}}&lt;/h2&gt;
         &lt;p&gt;{{row.jobtitle}}&lt;/p&gt;
       &lt;/div&gt;
  
       &lt;a href="tel:{{row.phone}}" class="item item-icon-left"&gt;
         &lt;i class="icon ion-iphone"&gt;&lt;/i&gt;
         {{row.phone}}
       &lt;/a&gt;
  
       &lt;a href="mailto:{{row.email}}" class="item item-icon-left"&gt;
        &lt;i class="icon ion-email"&gt;&lt;/i&gt;
        {{row.email}}
       &lt;/a&gt;         
  
     &lt;/div&gt;
  
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>And then I have my basic controller:</p>
  
  <pre><code>.controller('ModalCtrl', function($scope, $ionicModal) {
  
      $ionicModal.fromTemplateUrl('my-modal.html', { 
          scope: $scope, 
          animation: 'slide-in-up'
      }).then(function(modal) {
          $scope.modal = modal;
      });
      $scope.openModal = function() {
          $scope.modal.show();
      };
      $scope.closeModal = function() {
          $scope.modal.hide();
      };
  
      $scope.$on('$destroy', function() {
          $scope.modal.remove();
      });
  
  })
  </code></pre>