AngularJS Example

HTML

<div ng-app="app" ng-controller="Ctrl">
  <div>
    I have {{friends.length}} friends. They are:
    <input type="search" ng-model="q" placeholder="filter friends..." />
    <ul>
      <li ng-repeat="friend in friends | filter:q"
          ng-animate="{enter: 'example-repeat-enter',
                      leave: 'example-repeat-leave',
                      move: 'example-repeat-move'}">
        [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
      </li>
    </ul>
    <button ng-click="shuffle()">SHUFFLE 'EM</button>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<style>
.example-repeat-enter-setup,
.example-repeat-leave-setup,
.example-repeat-move-setup {
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -ms-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.example-repeat-enter-setup {
  line-height:0;
  opacity:0;
}
.example-repeat-enter-setup.example-repeat-enter-start {
  line-height:20px;
  opacity:1;
}

.example-repeat-leave-setup {
  opacity:1;
  line-height:20px;
}
.example-repeat-leave-setup.example-repeat-leave-start {
  opacity:0;
  line-height:0;
}

.example-repeat-move-setup {
  opacity:1;
  color:red
}
.example-repeat-move-setup.example-repeat-move-start {
  opacity:1;
  color:black;
}

JavaScript

angular.module('app', [
]).controller('Ctrl', function($scope) {
    $scope.friends = [
        {name:'John', age:25, gender:'boy'},
        {name:'Jessie', age:30, gender:'girl'},
        {name:'Johanna', age:28, gender:'girl'},
        {name:'Joy', age:15, gender:'girl'},
        {name:'Mary', age:28, gender:'girl'},
        {name:'Peter', age:95, gender:'boy'},
        {name:'Sebastian', age:50, gender:'boy'},
        {name:'Erika', age:27, gender:'girl'},
        {name:'Patrick', age:40, gender:'boy'},
        {name:'Samantha', age:60, gender:'girl'}
    ];
    
    $scope.shuffle = function() {
        $scope.friends = _($scope.friends).shuffle();
    }
});