title: How to toggle bootstrap collapse from angularjs
body: <p>I am trying to toggle bootstrap collapse programmatically which is </p>
  
  <pre><code> &lt;div class="panel-heading" role="tab" id="headingStores"&gt;
                                  &lt;h4 class="panel-title"&gt;
                                      &lt;span class="collapsed" id="StoresPanel" role="button" data-toggle="collapse" data-parent="#filter-field-container" href="#filterStores" aria-expanded="false" aria-controls="filterStores"&gt;
                                          &lt;i class="fa fa-chevron-circle-right"&gt;&lt;/i&gt;&lt;i class="fa fa-chevron-circle-down"&gt;&lt;/i&gt;  Stores
                                          &lt;span ng-if="showStore" class="pull-right"&gt;{{countStore}}&lt;/span&gt;
                                      &lt;/span&gt;
                                  &lt;/h4&gt;
                              &lt;/div&gt;
  </code></pre>
  
  <p>My angular code is </p>
  
  <pre><code>    var domElement = document.getElementById('StoresPanel');
  
      angular.element(domElement).collapse('show');
  </code></pre>
  
  <p>But collapse('show') is not invoking the toggle functionality. Kindly help !</p>