AngularJs Cycle ngRepeat

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<body ng-app="myApp">
    <div ng-controller="RootCtrl">
        <div class="slideshow" cycle>
            <img src="{{ item.src }}" width="200" height="200" ng-repeat="item in items" />
        </div>
    </div>
</body>

CSS

.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }

JavaScript

var myApp = angular.module('myApp',[]);

myApp.controller('RootCtrl', function ($scope) {
    $scope.items = new Array();
    $scope.items.push({ src: "http://malsup.github.com/images/beach1.jpg"});
    $scope.items.push({ src: "http://malsup.github.com/images/beach2.jpg"});
    $scope.items.push({ src: "http://malsup.github.com/images/beach3.jpg"});
    $scope.items.push({ src: "http://malsup.github.com/images/beach4.jpg"});
});

myApp.directive('cycle', function() {
    return {
        restrict: 'A',
        priority: 1001,
        link: function(scope, element, attrs) {
           setTimeout(function(){
               $(element).cycle({
                   fx: 'fade',
                   timeout: 10
               });
           }, 0);
        }
    };
});