title: buggy animation on ng-repeat (animates wrong element)
body: <p>I have added some animation on element removal for <code>ng-repeat</code> item and what follows is it duplicates the last element of the list and applies the animation on it instead of the deleted one.</p>
  
  <p>Why the animation isn't applied on the removed element but instead on the last one duplicated ?</p>
  
  <p>Full code example: <a href="https://jsfiddle.net/8bhyv1b4/" rel="nofollow">https://jsfiddle.net/8bhyv1b4/</a></p>
  
  <p><strong>Controller</strong>:</p>
  
  <pre><code>$scope.selectedImgs = [];
  
  $scope.deleteImg = function() {
    $scope.selectedImgs.forEach(function(selectedImgIndex, i) {
      // remove image by index 
      $scope.imgs.splice(selectedImgIndex - i, 1);
    });
    $scope.selectedImgs = [];
  }
  
  $scope.toggleImg = function(index) {
    var i = $scope.selectedImgs.indexOf(index);
    if (i + 1) {
      $scope.selectedImgs.splice(i, 1);
    } else {
      $scope.selectedImgs.push(index);
      $scope.selectedImgs.sort(function sortNumber(a, b) {
        return a - b;
      });
    }
    $scope.$apply();
  }
  </code></pre>
  
  <p><strong>Template</strong>:</p>
  
  <pre><code>&lt;section class="txtcent"&gt;
    &lt;img-row class="blk clearfix" size="imgs.length" ontoggle="toggleImg" selected="selectedImgs"&gt;
      &lt;section ng-repeat="url in imgs track by $index" class="inlblk frameimg"&gt;
        &lt;div&gt;
          &lt;img width="150" ng-src="{{url}}" /&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    &lt;/img-row&gt;
    &lt;span class="noimgmsg" ng-if="!imgs.length"&gt;Add images&lt;/span&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.frameimg.ng-leave{
    -webkit-animation: 3s removeImgItem;
  }
  @-webkit-keyframes removeImgItem {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  </code></pre>
  
  <p>Appreciate your kind help</p>