AngularJS ng-repeat with bootstrap carousel

All we need is an easy explanation of the problem, so here it is.

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">

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


How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply