Angular with jQuery Cycle

http://jquery.malsup.com/cycle/

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.9.18/angular-0.9.18.js"></script>

<div ng:controller="MyCtrl">
        <a href ng:click="remove()">remove item</a>
    <jqp:cycle watch="items.length" fx="fade" class="slideshow">
        <img ng:repeat="img in items" ng:src="{{img.url}}" />
    </jqp:cycle>
</div>

CSS

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

JavaScript

function MyCtrl() {
    this.items = [
        {"url": "http://cloud.github.com/downloads/malsup/cycle/beach1.jpg"},
        {"url": "http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"},
        {"url": "http://cloud.github.com/downloads/malsup/cycle/beach3.jpg"},
        {"url": "http://cloud.github.com/downloads/malsup/cycle/beach4.jpg"},
        {"url": "http://cloud.github.com/downloads/malsup/cycle/beach5.jpg"}
    ];
    
    this.remove = function() {
      this.items.pop();
    };
}

angular.widget('jqp:cycle', function() {
    // tell angular to compile descendants
    this.descend(true);
    this.directives(true);
    
    return function(elm) {
        // parse options - you can make more flexible of course
        var options = {
            fx: elm.attr('fx')
        };
        
        this.$watch(elm.attr('watch'), function() {
            // async to be executed after ng:repeat
            setTimeout(function() {
                elm.cycle('destroy');
                elm.cycle(options);
            }, 0);
            
        });
    };
});