javascript - Reading the active slide # on angular ui boostrap carousel -

javascript - Reading the active slide # on angular ui boostrap carousel -

i'm using angular bootstrap carousel ui need utilize carousel image selector, can't find way bind selected $index. there way it, hacky way?

here's plunkr mess with.

i've tried putting ng-click=($index) on <slide> tag under slider controls, doesn't fire when carousel slid.

<carousel interval="carouselinterval" class="no-animate" > <slide ng-repeat="slide in token.images | eligiblewidth:200" class="no-animate" ng-click="slideselect($index)"> <!-- doesn't fire cuz under controls --> <img ng-src="{{slide.src}}" style="margin:auto;"> <div class="carousel-caption"> <h4>{{$index+1}} of {{(token.images | eligiblewidth:200).length}}</h4> <p >{{slide.caption}}</p> </div> </slide> </carousel>

with hacky way. utilize onclick trigger angular scope function.

<slide onclick="angular.element(this).scope().clickitem(this)" data-index="{{$index}}" > ... <slide>

in controller:

$scope.clickitem = function(target){ var ele = angular.element(target); var index = ele.attr('data-index'); };

here plunker demo link

hope can work.

javascript jquery angularjs twitter-bootstrap