How to expand bootstrap accordion in Angular directive?

In my Angular directive I try to hide and show accordion panels. The problem is, when I access the accordion by code, the accordion breaks.

For example, when I do this:

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

The panel is collapsed, but the link in the header doesn't work anymore, so the user can't expand the panel. I've also tried things like:

$("#collapseOne").removeClass('in'); and $("#collapseOne").hide();

but none of them works. Or they have the same effect or just don't work at all.

Here is the 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">
                        My form
                </a>
            </div>
            <div id="collapseTwo" class="accordion-body collapse">
                <div class="accordion-inner">
                     <form novalidate data-ng-submit="certificateFormSubmit()">
                        Some 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 for other content
                </a>
            </div>
            <div id="collapseThree" class="accordion-body collapse">
                <div class="accordion-inner">
                     Some other content
                </div>
            </div>
        </div>
    </div>

and this is the signature of my 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 the certificate attribute value, I want to expand a accordion panel
        });

I've tried to create a Fiddle, but I couldn't get the fiddle to work. I've spend two hours to create a Fiddle, but I can't get the directive to work..

Upvotes: 1