Angular JS repeater + Bootstrap Carousel

Question

I'm trying to fill a Bootstrap Carousel component with data from AngularJS. Basically I'm filling the items inside carousel-inner class like this:

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

Which would work fine, but at first I cannot see any picture, I think it's because none of my items has the 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 "active" class, and it is visible, and when I try to write my example without Angular JS like above, it works.

How can I set the first item from ng-repeat to have the "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 exposed on the local scope.