angularjs - How to expand bootstrap accordion in Angular directive? -

in angular directive try hide , show accordion panels. problem is, when access accordion code, accordion breaks.

for example, when this:

$("#collapseone").collapse('hide')

the panel collapsed, link in header doesn't work anymore, user can't expand panel. i've tried things like:

$("#collapseone").removeclass('in'); , $("#collapseone").hide();

but none of them works. or have same effect or don't work @ all.

here html:

<div class="accordion" id="accordion2">         <div class="accordion-group">             <div class="accordion-heading">                     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseone">                         customer                     </a>             </div>             <div id="collapseone" class="accordion-body collapse">                  <div class="accordion-inner">                     customer list                 </div>             </div>         </div>          <div class="accordion-group">             <div class="accordion-heading">                 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapsetwo">                         form                 </a>             </div>             <div id="collapsetwo" class="accordion-body collapse">                 <div class="accordion-inner">                      <form novalidate data-ng-submit="certificateformsubmit()">                         form                     </form>                 </div>             </div>         </div>         <div class="accordion-group">             <div class="accordion-heading">                 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapsethree">                         title other content                 </a>             </div>             <div id="collapsethree" class="accordion-body collapse">                 <div class="accordion-inner">                      other content                 </div>             </div>         </div>     </div> 

and signature of directive:

app.directive('certificateedit', function ($q, productservice, customerservice, certificateservice) {     return {         restrict: 'e',         templateurl: '/certificate/add',         scope: {             certificate: '=',             customerid: '=',             visible: '=',             oncertificatesaved: '&'         },         controller: function ($scope, $element, $attrs) {            // based on certificate attribute value, want expand accordion panel         }); 

i've tried create fiddle, couldn't fiddle work. i've spend 2 hours create fiddle, can't directive work..

have tried using angularjs-ui bootstrap, angular directives twitter bootstrap.