bootstrap carousel does not work correctly using partial file

Question

I am new to bootstrap and AngularJs. I am using bootstrap and Angular Js for my current application. When I use the bootstrap carousel directly inside the index page, the carousel's slide link are working absolutely perfect. But When I load the carousel markup through the partial files using ng-view, the slide links does not work correctly. It only works one time and then just don't work the next time. Where I am going wrong. I am pasting the code below:

<div class="corousal-container">
  <div class="col-md-12">
    <ul id="tabs" class="ops-tabs">
      <li class="col-md-4 ops-list active">
        <a href="#" class="ops-block">
          <span class="header">Charts</span>
        </a>
      </li>
      <li class="col-md-4 ops-list">
        <a href="#" class="ops-block">
          <span class="header">Graphs</span>
        </a>
      </li>
      <li class="col-md-4 ops-list">
        <a href="#" class="ops-block">
          <span class="header">Reports</span>
        </a>
      </li>
    </ul>  
  </div>
</div>
<div class="col-md-12">
  <div data-ride="carousel" class="carousel slide" id="execView">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-slide-to="0" data-target="#execView" class="active"></li>
      <li data-slide-to="1" data-target="#execView" class=""></li>
      <li data-slide-to="2" data-target="#execView" class=""></li>
    </ol>
    <div class="carousel-inner">
      <div class="item">
        <div class="container" id="pie-chart1">
        </div>
      </div>
      <div class="item">
        <div class="container" id="pie-chart2">
        </div>
      </div>
      <div class="item active">
        <div class="container" id="pie-chart3">
          <div class="carousel-caption">
            <canvas class="canvas" id="canvas" style="width: 400px; height: 400px;" width="600" height="600"></canvas>
          </div>
        </div>
      </div>
    </div>
    <a data-slide="prev" href="#execView" class="left carousel-control"><span class="fa fa-angle-left"></span></a>
    <a data-slide="next" href="#execView" class="right carousel-control"><span class="fa fa-angle-right"></span></a>
  </div>
</div>

Answer 1

If you are using ng-view then you need to create your bootstrap carousel after the html is loaded. You can do this in the onload method.

<div ng-view onload="viewLoaded()"></div>


$scope.viewLoaded=function(){
 $('.carousel ').carousel()
}