Using bootstrap accordion on an angularjs page

Question

I am having an issue when I try to run the following code in an AngularJS page.

      <div class='panel-group' id=accordion'>
        <div class="panel panel-default">
          <h4 class="panel-title">
            <a data-toggle='collapse' data-parent='#accordion' href='#collapseOne'>foo</a>
          </h4>
          <div id='collapseOne' class='panel-collapse collapse'>
            <div class='panel-body'>
              <p>foo</p>
            </div>
          </div>
        </div>
      </div>

The code is correct, but since Angular uses # as an anchor for the routine, when I click to toggle my accordion, it redirects me to my homepage. Is there any way I could prevent this ?

ps: I know there is a library ui-bootstrap for angularjs with a directive to handle accordion, I just would like to know if there is a way to solve my issue without it :).

Answer 1

If you want a quick slightly hacky way without writing your own directive or using BootstrapUI, you could perhaps bypass the bootstrap jQuery way of toggling the accordion and put angular directives into the markup instead:

<div class='panel-group' id=accordion'>
    <div class="panel panel-default">
        <h4 class="panel-title">
            <a data-ng-click="accordion1 = !accordion1">foo</a>
        </h4>
        <div data-ng-show="accordion1">
            <div class='panel-body'>
                <p>foo</p>
            </div>
        </div>
    </div>
</div>

Might need some slight css if the removed collapse classes from the body wrapper do anything apart from just show/hide