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 sample is as follows. (Note : This code works well only with Bootstrap 3.1.0 but not along with AngularJS 1.2.13)

<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>     <a class="left carousel-control" href="#Carousel" data-slide="prev">         <span class="glyphicon glyphicon-chevron-left"></span>     </a>     <a class="right carousel-control" href="#Carousel" data-slide="next">        <span class="glyphicon glyphicon-chevron-right"></span>     </a> </div> 

Answer 1

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>