how to get current slide index: uib carousel - angular-ui-bootstrap

Question

I would like to get the current slide index onChange and not onClick but I don't know how do do that.
First, I had it with ng-click, like this:
In the .html:
<ul uib-carousel id="myCarousel" active="active" no-wrap="noWrapSlides"
style="background-color: #0a0a0a; height:100%; width:100%; padding: 0">
<li id="mySlides" uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"
style="background-color: #0a0a0a; height: 100%;width: 100%;">
<img ng-src="{{slide.imageUrl}}" ng-click="setSelectedImage(slide.data)" style="background-color: #0a0a0a; height: 100%;width: 100%; max-height: 640px; max-width: 800px"/>
</li>
</ul>
And in the .js:
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var currIndex = 0;
var slides = $scope.slides = [];
$scope.addSlide = function(media,data) {
slides.push({
imageUrl: $scope.urlWsImg+media.mediaId+"/stream/800",
id: currIndex++,
data:data
});
};
$scope.addSlide($scope.currentImage.media,$scope.currentImage);//bootstrap
for(var i=0;i<enrichedImages.length;i++) {
var enrichedImage=enrichedImages[i];
$scope.addSlide(enrichedImage.previewImage,enrichedImage);
}
$scope.setSelectedImage =function(imageUrl){
$scope.currentEnrichedImage=imageUrl;
}
I've tried on put an onchange="setSelectedImage(slide.data)" in #my-carousel, but it doesn't work since the slide is unknown when the change occurs.
I hope someone can help me.

Answer 1

You can't use ngChange because the directive doesn't expose any ngModel
From the ngChange docs
Note, this directive requires ngModel to be present.
But you have the active property that you can $watch
$scope.$watch('active', function(newIndex, oldIndex) {
if (Number.isFinite(newIndex) && newIndex!==oldIndex) {
// invoke your function here
}
});
Here is a forked plunk

Answer 2

It seems that active is holding the current index.
You should be able to just use $scope.active.