1.2.19/docs/examples/example-example41/index-production.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example41-production</title>
  <link href="animations.css" rel="stylesheet" type="text/css">
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-animate.js"></script>
  

  
</head>
<body ng-app="ngAnimate">
    <div ng-init="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'}
  ]">
    I have {{friends.length}} friends. They are:
    <input type="search" ng-model="q" placeholder="filter friends..." />
    <ul class="example-animate-container">
      <li class="animate-repeat" ng-repeat="friend in friends | filter:q">
        [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
      </li>
    </ul>
  </div>
</body>
</html>