How to trigger an ng-move with angular-animate when reordering an array?

Question

Using angular 1.2.4 I'm trying to figure out how to trigger ng-animate's move when a repeated item is reordered. I know the ng-animate is working because the animation for enter, leave, and move are all triggered when a filter is applied. However, when I use some array methods to reorder the array, no animations are triggered. I suspect part of the problem is that I am actually removing and adding elements to the array with this method, not really 'moving' them:

  $scope.moveDown = function(order){
    var temp = $scope.names[order];
    $scope.names.splice(order, 1);
    $scope.names.splice(order+1, 0, temp);
  }

Here is a plunker that shows what I'm up to: http://plnkr.co/edit/SuahT6XXkmRJJnIfeIO1?p=preview

Click on any of the names to have it move down the list.

Is there a way to reorder the array without splicing? Or else to manually trigger a move animation when the $index of an item changes?

Answer 1

Try giving a gap (In digestion) between removal and insertion, that will get the ng-enter and ng-leave animations to kick in.

    var temp = $scope.names.splice(order, 1).pop();
    $timeout(function(){
       $scope.names.splice(order+1, 0, temp);
    });

Plnkr

If you want to avoid using timeout, restructure your data a bit, make it array of objects (which is always desirable anyways) and do:-

ViewModel:-

  $scope.names = [{'name':'Igor Minar'}, {'name':'Brad Green'}, {'name':'Dave Geddes'}, {'name':'Naomi Black'}, {'name':'Greg Weber'}, {'name':'Dean Sofer'}, {'name':'Wes Alvaro'}, {'name':'John Scott'}, {'name':'Daniel Nadasi'}];

In the handler:-

  $scope.moveDown = function(order){
    var itm  = $scope.names.splice(order+1, 1).pop(); //Get the item to be removed
    $scope.names.splice(order, 0, angular.copy(itm)); //use angular.clone to get the copy of item with hashkey
  }

2 things are important here, you would need to use angular.clone so that default tracker property ($$hashkey) will be removed from the shifting item,it seems like only when the item is removed and new item is inserted (based on tracker property) angular adds the animation classes to it. You cannot do it with primitive as you originally had.

Plnkr2