angularjs 轮播图

<div ng-controller="CarouselDemoCtrl" class="panel b-a" set-ng-animate="false">
        <div class="panel-heading">
          Carousel
        </div>
        <carousel interval="myInterval">
          <slide ng-repeat="slide in slides" active="slide.active">
            <img ng-src="{{slide.image}}" class="img-full">
            <div class="carousel-caption">
              <h4>Slide {{$index}}</h4>
              <p>{{slide.text}}</p>
            </div>
          </slide>
        </carousel>
        <div class="panel-footer">
          <button type="button" class="btn btn-default m-r" ng-click="addSlide()">Add Slide</button>
          Interval: <input type="number" class="form-control w-sm inline" ng-model="myInterval"> ms          
        </div>

      </div>

js:

app.controller('CarouselDemoCtrl', ['$scope', function($scope) {
    $scope.myInterval = 5000;
    var slides = $scope.slides = [];
    $scope.addSlide = function() {
      slides.push({
        image: 'views/img/c' + slides.length + '.jpg',
        text: ['Carousel text #0','Carousel text #1','Carousel text #2','Carousel text #3'][slides.length % 4]
      });
    };
    for (var i=0; i<4; i++) {
      $scope.addSlide();
    }
  }]) ;