Angular ng-animate with jQuery

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<div ng-controller="App">
    <button ng-click="add()">Add</button>
    <ul>
        <li ng-animate="{enter: 'slide-down',
                        leave: 'slide-up' }" ng-click="remove($index)" ng-repeat="name in names">{{name}}</li>
    </ul>
</div>

JavaScript

angular.module('MyApp', ['my-animations']);

angular.module('my-animations', [])
    .animation('slide-up', function () {
        return {
            start : function(element, done, memo) {
                jQuery(element).slideUp('fast', done);
            }
        };

    })
    .animation('slide-down', function () {
        return {
            setup : function(element) {
                $(element).css({display: 'none'});
            },
            start : function(element, done, memo) {
                jQuery(element).slideDown('fast', done);
            }
        };

    });
setInterval(function () {
	 App();
	  }, 3000);
function App($scope) {
    $scope.names = [];
    var data = [];
    for (var i = 0; i < 100; i++) {
        data.push('item' + i)
    }
    $scope.add = function () {
        if (data.length) $scope.names.splice(0, 0, data.pop());
    };
    $scope.remove = function (index) {
        $scope.names.splice(index, 1);
    };
}