AngularJS: Bootstrap collapse only targets one <li> element using ng-repeat

Question

I don't know if it has something to do with ng-repeat displaying the rest of the elements after the DOM loaded. It seems to only display the first element if collapse is not expanded on load, and if it's expanded on load, only collapse the first element.

Is there a way for Bootstrap's collapse to target all elements in {{nav}} to collapse? I saw this post that seems similar but do not understand the concept of using timeout

Link to Plunker

The code block in question is:

<li  data-toggle="collapse" data-target="#requests" class="collapsed">
    <a href=""> <i class="fa fa-picture-o fa-lg"> </i> Photo Requests <span class="arrow"> </span> </a> <!-- dropdown -->
</li>
   <ul class="sub-menu collapse in" id="requests" ng-repeat="nav in subnav.link">
      <li id="requests"><a ng-href='{{nav.href}}'> {{nav.title}} </a></li>                  
   </ul>

Answer 1

You should put ng-repeat under li tag, as it repeats self tag

<ul class="sub-menu collapse in" id="requests">
  <li ng-repeat="nav in subnav.link" id="requests"><a ng-href='{{nav.href}}'> {{nav.title}} </a></li>                  
</ul>