Bootstrap's tabs with data-toggle cause reload in angularjs

I've just migrated to AngularJS 1.2. And I've realized that all my menu/navigation elements that were configured with data-toggle, for instance:

<li><a href="#additionalSelection" data-toggle="tab">Additional Selection</a></li>

are not working any more. They should toggle element with id="additionalSelection" - and this is how Angular & Bootstrap worked when I was using version 1.0.8 of Angular.

But now, when I click anchor element, Angular intercepts this click and tries to go to route additionalSelection and it causes page refresh...

Is there a way to fix it?

Solution 1:

The solution is as simple as replacing href attribute with data-target. That solves the issue:

<li><a data-target="#additionalSelection" data-toggle="tab">Additional Selection</a></li>

Solution 2:

As dragonfly pointed out, data-target works fine instead of href.

There is a small difference in CSS. When data-target is used vs href, the cursor is not a pointer anymore. If you don't want to add extra CSS, you can do the following:

<a href="#additionalSelection" data-toggle="tab" onclick="return false;">Selection</a>

This is just a suggestion, not an elegant solution. But if you want to use href for some reason, add onclick="return false;"

Solution 3:

Simply replace href attribute from data-target

<li><a data-target="#switchTabs" data-toggle="tab">Tabs</a></li>