Angular with jCarousel

http://sorgalla.com/projects/jcarousel/

HTML

<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.9.17/angular-0.9.17.js"></script>
<script type="text/javascript" src="https://raw.github.com/jsor/jcarousel/master/lib/jquery.jcarousel.js"></script>

<jqp:jcarousel src="['66/199481236_dc98b5abb3_s.jpg', '75/199481072_b4a0d09597_s.jpg', '57/199481087_33ae73a8de_s.jpg', '77/199481108_4359e6b971_s.jpg']"></jqp:jcarousel>

CSS

.jcarousel-skin-tango .jcarousel-container {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #F0F6F9;
    border: 1px solid #346F97;
}

.jcarousel-skin-tango .jcarousel-direction-rtl {
    direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 245px;
    padding: 20px 40px;
}

.jcarousel-skin-tango .jcarousel-container-vertical {
    width: 75px;
    height: 245px;
    padding: 40px 20px;
}

.jcarousel-skin-tango .jcarousel-clip {
    overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  245px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-clip-vertical {
    width:  75px;
    height: 245px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-left: 0;
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
    margin-left: 10px;
    margin-right: 0;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
    margin-bottom: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
*  Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(http://sorgalla.com/projects/jcarousel/skins/tango/next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(http://sorgalla.com/projects/jcarousel/skins/tango/prev-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango...

JavaScript

angular.widget('jqp:jcarousel', function() {
    return function(elm) {
        var items = this.$eval(elm.attr('src')),
            ul = angular.element('<ul class="jcarousel-skin-tango"></ul>');

        // append the carousel into DOM
        elm.append(ul);
        ul.jcarousel();

        // dynamically add items
        angular.forEach(items, function(img, i) {
            ul.jcarousel('add', i + 1, '<img src="http://static.flickr.com/' + img + '" />');
        });
        ul.jcarousel('size', items.length);
    };
});