глючная анимация на ng-repeat (анимирует неправильный элемент)

Я добавил анимацию для удаления элемента для элемента ng-repeat а затем он дублирует последний элемент списка и применяет анимацию на нем вместо удаленной.

Почему анимация не применяется к удаленному элементу, но вместо этого на последнем дублируется?

Полный пример кода: https://jsfiddle.net/8bhyv1b4/

Контроллер:

$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();
}

Шаблон:

<section class="txtcent">
  <img-row class="blk clearfix" size="imgs.length" ontoggle="toggleImg" selected="selectedImgs">
    <section ng-repeat="url in imgs track by $index" class="inlblk frameimg">
      <div>
        <img width="150" ng-src="{{url}}" />
      </div>
    </section>
  </img-row>
  <span class="noimgmsg" ng-if="!imgs.length">Add images</span>
</section>

CSS:

.frameimg.ng-leave{
  -webkit-animation: 3s removeImgItem;
}
@-webkit-keyframes removeImgItem {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Цените свою помощь