Bootstrap carousel not working with angularjs

Building on what rbanning said, instead of adding the event handler you can just, after replacing the anchor tags with span tags, replace the href attribute with a "data-target" attribute and bootstrap takes care of the rest.

Like so:

<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
    <li data-target="Carousel" data-slide-to="0" class="active"></li>
    <li data-target="Carousel" data-slide-to="1"></li>
    <li data-target="Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
    <div class="item active">
        <img src="images/c.png" class="img-responsive">
    </div>
    <div class="item">
        <img src="images/b.png" class="img-responsive">
    </div>
    <div class="item">
        <img src="images/a.png" class="img-responsive">
    </div>
</div>
<span class="left carousel-control" data-target="#Carousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
</span>
<span class="right carousel-control" data-target="#Carousel" data-slide="next">
   <span class="glyphicon glyphicon-chevron-right"></span>
</span>
</div>

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...

Set target="_self" in your carousel controls:

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

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>

You can also just use ng-click on both controls.

I'm using this on my site (note href="" is blank now)

In view:

    <a class="left carousel-control" href="" ng-click="slide('prev')" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    </a>
    <a class="right carousel-control" ng-click="slide('next')" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    </a>

In controller:

$scope.slide = function (dir) {
    $('#carouselId').carousel(dir);
};

Your code works fine.

No any problem in the code you showed.

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

Why not use Angular UI to get Bootstrap and Angular to play along nicely ?

http://angular-ui.github.io/bootstrap/#/carousel

EDIT:

Your code isn't working because on the navigation links you have href attributes set at #Carousel. So when you click on those links Angular router will try to change view and to display the one called Carousel which isn't defined in your $routeProvider hence the blank page.

Since you're using Bootstrap.js it seems like you absolutely need these href attributes so maybe get rid of the router. Or give a try to Angular UI ;)

This works, without modify the original bootstrap example

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

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

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