angularjs - Bootstrap Collapse が ng-repeat で奇妙な方法で動作する

Question

次のコード スニペットがあります。

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

すべての「prov.subnets の p」を関連する「prov.name」にまとめようとしています。ご覧のとおり、NG リピートがネストされています。コードを実行すると、最初は正しく折りたたまれます。ただし、それらを展開してもう一度折りたたむと、折りたたまれず、「グリッチ」のような折りたたみアニメーションが表示されます。

要素インスペクタを使用しましたが、$index が div に名前を付けるために正しく機能しているようです。他に何か提案はありますか？