how to display bootstrap collapse-panel in a loop using angularJS ng-repeat?
<p>I am using angularJS and trying to add bootstrap collapsible-panel in a loop.<br>
I have written the code below, but the <code>body</code> of all the panels is getting displayed under the first panel header.<br>
I need the <code>body</code> to be displayed under their corresponding panel headers.<br>
I believe this is happening because of the <code>&lt;div id="myButton"&gt;</code> is getting called for all the subsequent panel in the loop whenever a click is taking place in <code>&lt;a href="#myButton"&gt;</code>.<br>
Is there a way I can use a variable value for setting the ID?<br>
Anything like:  <code>&lt;a href="#{{variable}}"&gt;</code> and <code>&lt;div id="{{variable}}"&gt;</code>  ?  </p>

<p>Code I wrote:  </p>

<pre><code>&lt;div ng-repeat="ownr in meldHealth.ownerList | orderBy: 'ownr'"&gt;
    &lt;div class="panel-group"&gt;
        &lt;div class="panel panel-default"&gt;
            &lt;div class="panel-heading"&gt;
                &lt;h4 class="panel-title"&gt;
                    &lt;a data-toggle="collapse" href="#myButton" ng-click="getApps(ownr)"&gt;{{ownr}}&lt;/a&gt;
                &lt;/h4&gt;
            &lt;/div&gt;
            &lt;div id="myButton" class="panel-collapse collapse"&gt;
                &lt;div class="panel-body"&gt;
                    &lt;div class="col-xs-12"&gt;
                        &lt;span ng-repeat="word in ownerApps | orderBy: 'word'"&gt;
                            &lt;button class="btn btn-default text-blue" data-toggle="modal" href="#myModal" type="button"
                             ng-click="getDetails(word.name, currOwner)" style="width:250px;"&gt;
                            {{word.name}}
                            &lt;/button&gt;
                        &lt;/span&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>