Angular Repeater JS + Carousel Bootstrap

Question

I am trying to populate the Bootstrap Carousel component with data from AngularJS. I basically populate the elements inside the carousel-inner class as follows:

  <div class="carousel-inner"> <div class="item" ng-repeat="screen in app.screens"> <img ng-src="screens/{{screen}}" class="center"/> </div> </div> 

Which will work fine, but at first I don’t see the picture, I think, because none of my elements has an active class.

In the official documentation:

 <div class="carousel-inner"> <div class="active item">…</div> <div class="item">…</div> <div class="item">…</div> </div> 

The first div has an “active” class, and it is visible, and when I try to write my example without Angular JS, as shown above, it works.

How can I set the first element from ng-repeat to have an “active” class?

Answer 1

Use the following:

 <div class="item" ng-repeat="screen in app.screens" ng-class="{active : $first}"> 

Here you can see which properties are displayed in the local area.