Animating ng-repeat ng-move in angular 1.2.x

Question

I'm having difficulty getting a css animation for movement in an angular ng-repeat list. I have a plunker here: http://plnkr.co/edit/KIcTiJ?p=preview

As you can see, the ng-enter animation is processed when the plunker is first loaded. However, I can't find any way to have an animation get triggered for list movement. In the example, by clicking on the arrows, the ng-hide is processed, and I would expect the ng-move animation to be triggered, but I'm wondering if I'm misunderstanding how the ng-repeat move animation is triggered.

In either case, can anyone suggest a better way for me to get angular 1.2 animations applied to this list when I click the left and right arrows in that example? I have tried alternate methods of generating the ng-repeat (I could use an angular filter instead of an ng-hide), and I've tried different css transitions, but I can't seem to get anything to work. Any advice here would be greatly appreciated on how to progress.

Sorry if this question seems like a repeat, but I looked through similar questions on stackoverflow, but the only other answers I could find were for the older angular animation framework, or suggested custom javascript animation, which I was hoping to avoid.

Answer 1

ng-repeat animation work if the collection has changed. You can use $filter to reflect your change in the collection.

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

Here filteredData is a controller function which execute your filter logic. (you can write custom filter as well)

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

Check the updated Plunker how animation works.