title: AngularJs "Collapse" | ng-repeat multiple accordions
body: <p>I have two accordions using the same function called "<code>collapse</code>", this is part of bootstrap. </p>
  
  <p>The issue I'm having is that on click both accordions open at the same time - this is not what I'm after. </p>
  
  <p>What I think is going on is that both accordions are using the same function with no differentiator like an ID or get by element. </p>
  
  <p>I'm unsure how to make it so that if a user clicks on the accordion, only the clicked accordion opens.</p>
  
  <p>Here is my code: </p>
  
  <pre><code>&lt;div class="col-xs-12"&gt;
                    &lt;div class="connections-wrap" ng-class="{'accordion-active': active}" ng-click="isCollapsed = !isCollapsed; toggleClass()" ng-init="isCollapsed = true"&gt;
                      &lt;span class="connection-amount"&gt;{{billingAccount.totalSharers}}&lt;/span&gt;
                      &lt;span class="connection-type"&gt;Shared connections&lt;/span&gt;
                      &lt;div class="account-summary-icon-set-3 task-left connection-chevron"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!-- {{connection}} --&gt;
  
                    &lt;ul class="connections-list connection-list-first collapse" collapse="isCollapsed"&gt;
                      &lt;li ng-repeat="sharedConnection in billingAccount.connections['sharers']"&gt;
                        &lt;span class="connection-device"&gt;{{sharedConnection.nameTwo}}&lt;/span&gt;
                        &lt;span class="connection-number"&gt;{{sharedConnection.billingAccountNumber}}&lt;/span&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
  
                    &lt;div class="connections-wrap"&gt;
                      &lt;span class="connection-amount"&gt;{{billingAccount.totalOthers}}&lt;/span&gt;
                      &lt;span class="connection-type"&gt;Other connections&lt;/span&gt;
                      &lt;div class="account-summary-icon-set-3 task-left connection-chevron"&gt;&lt;/div&gt;
                    &lt;/div&gt;
  
  
                    &lt;ul class="connections-list collapse" collapse="isCollapsed"&gt;
                      &lt;li ng-repeat="otherConnection in billingAccount.connections['others']"&gt;
                        &lt;span class="connection-device"&gt;{{otherConnection.nameTwo}}&lt;/span&gt;
                        &lt;span class="connection-number"&gt;{{otherConnection.billingAccountNumber}}&lt;/span&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt; 
                &lt;/div&gt;
  </code></pre>