Angular - jQuery Cycle update scope

by manikantag

HTML

<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script src="//code.angularjs.org/1.1.1/angular.js"></script>
<div id="slideshow_wrap" ng-app="testApp" ng-controller="Ctrl">
      <div >Current Image: {{currImage}}</div>
    <div id="slideshow" cycle>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200"
        height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200"
        height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200"
        height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200"
        height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200"
        height="200" />
    </div>
    
  
</div>

CSS

#slideshow_wrap {
    width: 232px;
    text-align:center;
    position:relative;
    overflow:hidden
}
#slideshow {
    height: 232px;
    width: 232px;
    margin: auto;
}
#slideshow img {
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #eee;
}

JavaScript

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

app.directive('cycle', function () {
    return function (scope, el, attrs) {
        $(el).cycle({
            after: function (curr, next, opts) {
                var angularScope = angular.element(curr).scope();
                angularScope.currImage = curr.src.replace('http://cloud.github.com/downloads/malsup/cycle/','');
                angularScope.$apply();

            }
        });
    }
});


function Ctrl($scope) {
    $scope.currImage = '';
}