I'm not completely sure this is a bug in carousel, but it really looks like it.
I'm using a carousel to display boat pictures. When I click on a button, a function to get a list of pictures by boat ID is executed and the list of pictures is retrieved from the database. First time, everything works perfectly. I can see the carousel displaying the pictures. However, if I click on this button for a second time, the function is run again, and the slide images are changed dynamically. This time, the carousel disappears. Just to check if the function worked and the pictures are there, I use Chrome tools to check the code. I can confirm that the slides with the pictures are there. However, there are some differences between both generated codes. Please, find the carousel code attached twice. The first one is when the core is working. The second one is when the code is not working (when I click the button and run the function for second time).
Here is the carousel source code:
<div id="boatCarousel" class="carousel slide" ng-show="boatSelected.mainPhoto">
<carousel interval="30000">
<slide ng-repeat="boatPhoto in boatPhotos">
<img src="//{{S3_BUCKET}}.{{PHOTO_SERVER_URL}}/img/boats/{{boatSelected.id}}/{{boatPhoto.id}}.{{boatPhoto.mime}}" style="margin:auto;">
</slide>
</carousel>
</div>
I have compared both codes and at first sight, I can see when it's working there is an active class in the first picture, which is missing in the second code.
CODE WORKING (First run):
<div id="boatCarousel" class="carousel slide" ng-show="boatSelected.mainPhoto">
<div class="carousel" interval="30000">
<ol class="carousel-indicators" ng-show="slides().length > 1">
<a href=""><!-- ngRepeat: slide in slides() --><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope active"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li></a>
</ol>
<div class="carousel-inner" ng-transclude="">
<!-- ngRepeat: boatPhoto in boatPhotos --><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope active" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/1.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/2.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/3.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/4.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/5.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/6.jpg" style="margin:auto;" class="ng-scope">
</div>
</div>
<a ng-click="prev()" class="carousel-control left" ng-show="slides().length > 1" href="">‹</a>
<a ng-click="next()" class="carousel-control right" ng-show="slides().length > 1" href="">›</a>
</div>
</div>
CODE NOT WORKING (SECOND RUN):
<div id="boatCarousel" class="carousel slide" ng-show="boatSelected.mainPhoto">
<div class="carousel" interval="30000">
<ol class="carousel-indicators" ng-show="slides().length > 1">
<a href=""><!-- ngRepeat: slide in slides() --><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li></a>
</ol>
<div class="carousel-inner" ng-transclude="">
<!-- ngRepeat: boatPhoto in boatPhotos --><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/1.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/2.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/3.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/4.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/5.jpg" style="margin:auto;" class="ng-scope">
</div><div ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" class="item ng-scope" ng-transclude="" ng-repeat="boatPhoto in boatPhotos">
<img src="//yanpy.dev.s3.amazonaws.com/img/boats/1/6.jpg" style="margin:auto;" class="ng-scope">
</div>
</div>
<a ng-click="prev()" class="carousel-control left" ng-show="slides().length > 1" href="">‹</a>
<a ng-click="next()" class="carousel-control right" ng-show="slides().length > 1" href="">›</a>
</div>
</div>
Am I missing something or it is a UI-Bootstrap bug?
I have also created a plunked trying to reproduce the issue, but I wasn't able to. Anyway, it would be helpful to check out the code. http://plnkr.co/edit/OzZmlCNT7M5MeT5EANy5?p=preview
UPDATE
I have just noticed this post Angular UI Boostrap Carousel setting active slide after making new slides. I think somehow my issue is related or same to this. The plunker in this post behaves the same as in my application, but in my application the pictures are not shown when I click on the next or previous arrows.
