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

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 ;)

Answer 2

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);
};

Answer 3

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>