Bootstrap Collapse working in a strange way with ng-repeat

Question

I have the following code snippet:

 <div ng-hide="loading" ng-repeat="prov in providers">
      <div data-toggle="collapse"  style="position:relative;font-weight:bold;" data-target="#collapse-{{$index}}">{{prov.name}}
        <div id="collapse-{{$index}}" class="collapse">
        <div  ng-repeat= "p in prov.subnets">
        <div class="col-sm-7 col-md-7" style="font-weight:normal;font-size:90%">
          {{p.zone}}
        </div>
    <div class="col-sm-5 col-md-5"><progress-bar></progress-bar></div>
        </div>
      </div>
      </div>
    </div>

I am attempting to make all the "p in prov.subnets" collapse into the relevant "prov.name". As you can see I have nested NG-repeats. If I run my code, it does collapse correctly the first time. However, If I expand them out and try and collapse them again It doesn't collapse and kind of "glitchily" shows a collapse animation.

I have used element inspector and it seems like $index is working correctly to name the divs. Has anyone any other suggestions?