How can I animate sorting a list with orderBy using ng-repeat with ng-animate?

Question

I\'m rendering a list of objects using ng-repeat with an orderBy filter like this:

Answer 1

I've expanded upon AndreM96's answer to allow displaying the list as a grid.

angular.module('StackApp', []).config(function($routeProvider) {

  'use strict';

  $routeProvider
    .when('/', {
      template: '
Animate Order
' +
        '
' +
        '' +
        'reverse

' +

        '' +
        'normal

' +

        '' +
        'random (click button below to shuffle again)
' +

        '
' +
        '' +
        '

' +
        '
' +
        '
{{$index}} - {{item.order}}. {{item.text}}
' +
        '
',
      controller: 'MainCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });

});

angular.module('StackApp').controller('MainCtrl', function($scope) {
  'use strict';

  $scope.order = 'false';

  $scope.myList = [{
      id: 0,
      text: 'HTML5 Boilerplate'
    },
    {
      id: 1,
      text: 'AngularJS'
    },
    {
      id: 2,
      text: 'Karma'
    },
    {
      id: 3,
      text: 'Hello'
    },
    {
      id: 4,
      text: 'World'
    },
    {
      id: 5,
      text: 'How'
    },
    {
      id: 6,
      text: 'Are'
    },
    {
      id: 7,
      text: 'You'
    },
    {
      id: 8,
      text: '?'
    },
    {
      id: 9,
      text: 'I'
    },
    {
      id: 10,
      text: 'write'
    },
    {
      id: 11,
      text: 'more'
    },
    {
      id: 12,
      text: 'to'
    },
    {
      id: 13,
      text: 'make'
    },
    {
      id: 14,
      text: 'the'
    },
    {
      id: 15,
      text: 'list'
    },
    {
      id: 16,
      text: 'longer'
    }
  ];

  $scope.$watch('order', function() {
    $scope.setOrder();
  });

  $scope.setOrder = function() {

    var i;

    if ($scope.order === 'random') {
      var t = [];
      for (i = 0; i < $scope.myList.length; i++) {
        var r = Math.floor(Math.random() * $scope.myList.length);
        while (inArray(t, r)) {
          r = Math.floor(Math.random() * $scope.myList.length);
        }
        t.push(r);
        $scope.myList[i].order = r;
      }
    } else if ($scope.order === 'false') {
      for (i = 0; i < $scope.myList.length; i++) {
        $scope.myList[i].order = i;
      }
    } else {
      for (i = 0; i < $scope.myList.length; i++) {
        $scope.myList[i].order = ($scope.myList.length - 1 - i);
      }
    }

    calcGridPosition();
  };

  function inArray(a, value) {
    for (var i = 0; i < a.length; i++) {
      if (a[i] === value) {
        return true;
      }
    }
    return false;
  }

  function calcGridPosition() {
    for (var i = 0; i < $scope.myList.length; i++) {
      var item = $scope.myList[i];

      // columns, left-to-right, top-to-bottom
      var columns = 5;
      item.column = item.order % columns;
      item.row = Math.floor(item.order / columns);

      // rows, top-to-bottom, left-to-right
      // var rows = 3;
      // item.column = Math.floor(item.order/rows);
      // item.row = item.order%rows;
    }
  }

});

#list {
  position: absolute;
  width: 100%;
  list-style-type: none;
  padding-left: 0;
}

#list li {
  position: absolute;
  height: 70px;
  width: 70px;
  background: #ffffd;
  -webkit-transition: all 2.5s ease-in-out;
  -moz-transition: all 2.5s ease-in-out;
  transition: all 2.5s ease-in-out;
}

JSBin Demo