ブートストラップカルーセルの4アイテムがNgを繰り返していますか？

Question

スライドに4つのアイテムを表示しようとしています。しかし、アクティブなスライドに対してアクティブなクラスを使用するので、メイン行をどのように繰り返しますか？これが私のHTMLの見た目です。

<div class="carousel slide" id="myCarousel"> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <div class="row"> 
        <div class="col-xs-3" ng-repeat="image in images"><a href="#"><img ng-src="{{image}}" class="img-responsive"></a></div> 
       </div> 
      </div> 
     </div> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> 
    </div> 

そしてJSONの例。あなたがそれを行うことができます

$scope.images = [ 
"http://placehold.it/500/e499e4/fff&text=1", 
"http://placehold.it/500/e499e4/fff&text=2", 
"http://placehold.it/500/e499e4/fff&text=3", 
"http://placehold.it/500/e499e4/fff&text=4", 
"http://placehold.it/500/e499e4/fff&text=5", 
"http://placehold.it/500/e499e4/fff&text=6", 
"http://placehold.it/500/e499e4/fff&text=7", 
] 

Answer 1

一つの方法は、

<div class="item active"> 
    <div class="row"> 
     <div class="col-xs-3" ng-repeat="image in images.slice(0,4)"><a href="#"><img ng-src="{{image}}" class="img-responsive"></a></div> 
    </div> 
</div> 
<div class="item"> 
    <div class="row"> 
     <div class="col-xs-3" ng-repeat="image in images.slice(5,9)"><a href="#"><img ng-src="{{image}}" class="img-responsive"></a></div> 
    </div> 
</div> 

Demo