Carousel - empty slide list

[qrman]

When slides list is cleared and filled with new slides Carousel stops working.

Here is reproducer.
Scenario:

1. Load 4 images - works fine
2. After 5 seconds clear slides list and fill with new images - carousel stops working

Plunker: http://plnkr.co/edit/u6inF6vMIzdSVplgkJBr?p=preview

AngularJS: 1.4.5
UI Bootstrap: 0.13.4

[ultimadj]

I'm experiencing the same.
My case: Clear and recompose the slide list when the window is resized past a media breakpoint. Active and next()/prev() fall apart, so the slides are no longer shown. Explicitly setting the first slide to active shows the first slide, but next/prev no longer function. <- verified as not an issue in 0.13.0. Verified as not functional in 0.13.4.

Bootstrap: 3.3.4

Other things tried:

• Keep the same array for $scope.slides and just clear it out/push. <- still an issue.
• Use a directive to totally nuke/repop the carousel in the page <- still an issue (this is wonky and could be an invalid case)

[ultimadj]

Verified as an issue in 0.13.1, 0.13.2, and 0.13.3 as well. NOTE: In my case, there's something funky around when/how the script is included. When I use the direct include, it appears to work in all versions, but after production-ification, 0.13.0 works and 0.13.1+ doesn't (likely my app/grunt setup).

Bower include: "angular-bootstrap": "0.13.0", <- works
Thanks!

[wesleycho]

There is a bug present in UI Bootstrap, but there are two things being done wrong here - one should not break the reference in $scope.slides here, and one should defer adding slides until the carousel is complete handling the garbage collection of listeners on the slide $scopes.

I will file a PR with the bug fix shortly, as well as link a Plunker that handles this correctly.

[qrman]

Hi!

I've updated Plunker and it seems that nothing has changed.

Can you check it?

http://plnkr.co/edit/HNakbA6GkNNcy3VZmoaF

AngularJS: 1.4.5
UI Bootstrap: 0.14.2

[samuel-allan]

Not sure if this helps.. but in vanilla bootstrap I solved a similar problem by setting one of the <div class="item"> elements to have an active class, e.g.:

<div class="item active">
...the first item...
</div>
..All other regular items
<div class="item">
</div>
..e.t.c.