AngularJS ng-repeat with bootstrap carousel

Question

I am trying to get this ng-repeat loop to work with the bootstrap carousel, but the way I understand and am currently using the carousel elsewhere is that only one div containing an image can be marked with the 'active' class, and one div must be marked with active otherwise the carousel fails. It also fails if more than one is marked. One and only one div can be marked active. Every other div should just be marked 'class=item' How to do I make that happen with ng-repeat? Thank you.

<div class="carousel" id="slider" style="margin-left: 20px;">

    <label class="labelSecurity">Incident Photos</label><br />

    <div class="carousel-inner">
        <div class="item active" ng-repeat="photo in photoPath">
            <img src="{{ photo.path }}" class="img-responsive">
        </div>
    </div>

    <a class="carousel-control right" href="#slider" data-slide="next"></a>

</div>

Answer 1

Then just mark the first one as active, like this:

<div class="item" ng-class="{active:!$index}" ng-repeat="photo in photoPath">