Ng-repeat ng-move animation in angular 1.2.x

Question

I find it hard to get css animation to move in angular list ng-repeat. I have a plunker here: http://plnkr.co/edit/KIcTiJ?p=preview

As you can see, the animation is ng-enterprocessed the first time the plunk is loaded. However, I cannot find a way to start the animation to move the list. In the example, by clicking on the arrows, ng-hide is processed, and I expect the ng-move animation to start, but I wonder if I am not mistaken how the ng-repeat motion animation starts.

Anyway, can anyone suggest a better way for me to get the angular 1.2 animations applied to this list when I click the left and right arrows in this example? I tried alternative methods of generating ng-repeat (I could use angular filter instead of ng-hide) and I tried different css transitions, but I can not get anything to work. Any advice here would be greatly appreciated on how to move forward.

Sorry if this question seems like a repeat, but I looked at similar questions about stackoverflow, but the only other answers I could find were for the old angular animation environment or the proposed custom javascript animation, which I was hoping to avoid.

Answer 1

ng-repeat , . $filter, .

<li ng-class="{'text-danger': item == f}" ng-repeat="item in items| filter: filteredData" class="animate-repeat">
  <span>{{item}}</span>
</li>

filteredData - , . ( )

  $scope.filteredData = function(item) {
    return (Math.abs($scope.f - item) < 2);
  }

Plunker, .