AngularJS - Animations

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<div ng-app="myapp" ng-controller="FirstCtrl">
    Search: <input type="text" ng-model="searchString">
    <div class="role" ng-repeat="person in people | filter:searchString | orderBy:sort" data-ng-animate="'repeat'">{{ person.first + ' ' + person.last }}</div>
</div>

CSS

.repeat-enter {
    transition: all 1s;
    opacity:0;
    height:0;
    padding:0;
    position:relative;
}
.repeat-enter-active {
    opacity:1;
    padding: 1em;
    height: 1.5em;
}
.repeat-leave {
    transition: all 1s;
    opacity:1;
    position:relative;
    left:0;
    height: 1.5em;
}
.repeat-leave-active {
    opacity:0;
    height:0;
    padding:0;
}

JavaScript

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.sortOptions = ['id', 'first', 'last'];
    $scope.sort = $scope.sortOptions[0];
    $scope.people = [
        { id: 1, first: 'John', last: 'Rambo', actor: 'Silvester' },
        { id: 2, first: 'Rocky', last: 'Balboa', actor: 'Silvester' },
        { id: 3, first: 'John', last: 'Kimble', actor: 'Arnold' },
        { id: 4, first: 'Ben', last: 'Richards', actor: 'Arnold' }
    ];
});