动画元素角度不消失

这基本上是我的问题：http://jsfiddle.net/mhff6u7y/3/

我有一个数组的项目重复和过滤，有时我动画其中一个项目。问题是，当过滤器发生更改，并且已设置动画的项目不应再显示时，该项目将一直保留到完成动画为止。所以，是的，为什么当我更改过滤器时，动画元素会保留而不会消失？

代码（与jsfiddle相同）：

HTML（需要导入：angular.js、angular-animate.js、animate.min.css）：

<div ng-controller="MyCtrl">
    <label>
      <input type="number" min="1" max="3" ng-model="choice.number" />
   </label>
  <br>
    selected number: {{ choice.number }}
    <div class="loader">
      <div class="item" 
           ng-repeat="item in list | filter: { number:choice.number}" 
           ng-class="{'animated':item == animatedItem}"
           ng-click="animatedItem = item;">
        {{item.text}}
      </div>
  </div>
</div>

css：

@-webkit-keyframes myanimation{
    0% { opacity: 1.0; }
    50% { opacity: 0.5; }
    100% { opacity: 1.0; }
}
.loader {
    position: absolute;
    top: 100px;
    left: 100px;
    padding: 5px;
    border-radius: 2px;
    background: #eee;
}
.item {
    margin: 5px;
    border-radius: 2px;
    background-color: #808080;
}
.animated {
    animation-name: myanimation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: 50;
    -webkit-animation-name:myanimation;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 50;
}

JavaScript:

var myApp = angular.module('myApp',['ngAnimate']);
myApp.controller('MyCtrl', function($scope) {
    $scope.isThinking = true;
    $scope.animatedItem = {};
    $scope.list = [{'number': 1, 'text': 'item1'},
                  {'number': 1, 'text': 'item11'},
                  {'number': 1, 'text': 'item111'},
                  {'number': 2, 'text': 'item2'},
                  {'number': 2, 'text': 'item22'},
                  {'number': 2, 'text': 'item222'},
                  {'number': 3, 'text': 'item3'},
                  {'number': 3, 'text': 'item33'},
                  {'number': 3, 'text': 'item333'}];
});

提前感谢