Bootstrap carousel not working with angularjs

Question

I want to use bootstrap carousel along with angular js to display images in carousel content. But, when the navigation links clicked, it displays blank page.

My code

Answer 1

If you don't need to bind your carousel, you can solve this by adding a top level element with ng-non-bindable directive:

<div ng-non-bindable>
    <div id="Carousel" class="carousel slide">
        <!-- carousel content -->
    </div>
</div>

Answer 2

Your code works fine.

No any problem in the code you showed.

http://plnkr.co/edit/1vq7DUXegQdBq3jvj7Zy?p=preview

Answer 3

As mentioned, the issue is with AngularJS and ngRoute intercepting the a-link clicks. I had this problem but did not want to use Angular UI Bootstrap (as described in other answers).

So, I changed the .carousel-control elements from links (a tags) to spans.

<span class="left carousel-control" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</span>
<span class="right carousel-control" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</span>

Then, I added an event handler as follows...

  $('.carousel').carousel({
                interval: 5000,
                pause: "hover",
                wrap: true
            })
            .on('click', '.carousel-control', handle_nav);

  var handle_nav = function(e) {
        e.preventDefault();
        var nav = $(this);
        nav.parents('.carousel').carousel(nav.data('slide'));
  }

Hope this helps...

Answer 4

This works, without modify the original bootstrap example

$("a.carousel-control").click(function(e){
    e.preventDefault();
    $(this).parent().carousel($(this).data("slide"));
});

Answer 5

Set target="_self" in your carousel controls:

<a class="left carousel-control" href="#Carousel" data-slide="prev" target="_self">

Answer 6

You can make function and place it on prev/next arrow in html.

$scope.prevSlide = function() {
    $('#MY-CAROUSEL-ID').carousel('prev');
};