Bootstrap ui carousel empty
<carousel interval="myInterval">
<slide ng-repeat="slide in behaviorDataset track by $index" ng-swipe-right="showPrev()" ng-swipe-left="showNext()">
<img ng-src="slide.image">
</slide>
</carousel>
var changeImagelist = function (imageList) {
$scope.$apply(function () {
$scope.behaviorDataset = imageList;
});
}
You will find the code for my carousel here. But something strange happens. I click on a button and then a modal frame from this carousel appears. But every time I click on the button, it should usually be a different image.
The first time it works properly, the second time I open a modal with a carousel in it and you don't see any data. But when you inspect the code with google chrome, you see the source code of the images that should be visible in the carousel.
How can I fix this problem?
----- update -----
I have done some examples in plunker here, you can see the problem I have. First you need to click on me. Then you will see a carousel with some items. Then close the modality window. and switch images and click again clicking me. Then you will see that the carousel is empty.
source to share
in your controller define a function to get images and use them in HTML
controller:
$scope.getSlides = function(){
return $scope.behaviorDataset;
}
in your ng-repeat:
<slide ng-repeat="slide in getSlides() track by $index" ng-swipe-right="showPrev()" ng-swipe-left="showNext()">
<img ng-src="slide.image">
</slide>
source to share