Angular Multi-item carousel - angularjs

Question

Ive been trying to make the angular carousel work, but iam currently stuck.
I am a newbie in angular, thus can i not get the ng-repeat too work correct.
what ive done:
<div id="slides_control">
<div>
<carousel interval="3000">
<slide ng-repeat="book in bookslider" active="book.active">
<div class="col-md-3"><img ng-src="{{book.img}}"></div>
<div class="col-md-3"><img ng-src="{{book[$index +1].img}}"></div>
<div class="col-md-3"><img ng-src="{{book[$index +2].img}}"></div>
<div class="col-md-3"><img ng-src="{{book[$index +3].img}}"></div>
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</slide>
</carousel>
</div>
$scope.bookslider = [
{
img: "images/headerslider/5.jpg"
},
{
img: "images/headerslider/4.jpg"
},
{
img: "images/headerslider/2.jpg"
},
{
img: "images/headerslider/3.jpg"
}
];
This display only the first image because it cannot "render" - book[$index +1].img how would one go about getting the next index item for this situation?
Working plunk: http://plnkr.co/edit/VcD8tKOtfQGuOgt4tO08

Answer 1

I gone through the plunker you provided and I under stand your requirement. I think the mistake that you made is where you loop the bookslider object. You need to loop through bookslider object instead of that you looped through the book object which is actually an individual object of the bookslider array.
You just change the carousel object like this to fix the issue.
<carousel interval="3000">
<slide ng-repeat="book in bookslider track by $index" active="book.active">
<div class="col-md-3"><img ng-src="{{bookslider[($index) %4 ].img}}" style="width=100px"></div>
<div class="col-md-3"><img ng-src="{{bookslider[($index+1) % 4].img}}"></div>
<div class="col-md-3"><img ng-src="{{bookslider[($index+2) % 4].img}}"></div>
<div class="col-md-3"><img ng-src="{{bookslider[($index+3) % 4].img}}"></div>
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</slide>
</carousel>
I have attached the working plunker here.