Bootstrap carousel indicators in twig loop

Question

I have a bootstrap carousel where I have some indicators. Depending on how many photos I have in a page, I would like to show the indicators corresponding the number of photos.

I tried to do a twig loop:

<ol class="carousel-indicators">
    {% for i in vehicule.photos|length %}
      <li data-target="#myCarousel" data-slide-to="{{ i }}" class="active"></li>
    {% endfor %}
</ol>

But this loop does not actually show any indicators, they are not shown although they seem to be there (firebug) How can I loop through the indicators and show them on the carousel ?

Here is the full carousel (everything works except the indicators)

<div id="myCarousel" class="carousel slide" data-interval="false">
            <ol class="carousel-indicators">
                {% for i in vehicule.photos|length %}
                    <li data-target="#myCarousel" data-slide-to="{{ i }}" class="active"></li>
                {% endfor %}
            </ol>
            <div class="fiche-vehicule-image">
                <div class="carousel-inner">
                    {% for photo in vehicule.photos %}
                        <div class="item {% if loop.first %}active{% endif %}">
                            <img data-photoswipe-loop="{{ loop.index0 }}" src="{{ photo.imgLarge }}" data-src-xxl="{{ photo.imgXxlarge }}" class="img-responsive">
                        </div>
                    {% endfor %}
                </div>
            </div>
            <a class="left carousel-control left-carousel-block" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left left-carousel-chevron"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control right-carousel-block" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right right-carousel-chevron"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

Thank you for any help given.

Answer 1

I found an answer, here is how I've done it:

<ol class="carousel-indicators">
      {% for i in 0..vehicule.photos|length %}
          <li data-target="#myCarousel" data-slide-to="{{ i }}" class="active"></li>
      {% endfor %}
</ol>

This is from the doc in which I applied to my code

{% for i in 0..10 %}
   * {{ i }}
{% endfor %}

Answer 2

If angular is implemented please use ng-repeat as below :

<ol class="carousel-indicators">
<li ng-repeat="i in vehicleList" data-target="#myCarousel" data-slide-to="{{$index}}"></li>
</ol>