Angular routing overrides href behavior utilized by tab and collapse panel plugins

Question

I'm using twitter-bootstrap for tabs and collapse panels. Both of these plugins work off of overriding hrefs. Sometimes - not consistently, the routeprovider will override the tab/collapse behavior and try to use it as a route.

I would love a workaround for this issue, but have also added it as an issue on github

A couple of suggestions of workaround implementations:

1. If .otherwise is not provided - do not touch any route that is not specifically configured.
2. add .ignore('path') to the routeProvider as a configuration option.

Answer 1

As a workaround, instead of using href="#targetDivId", Twitter Bootstrap allows data-target="#targetDivId" as an attribute, which solved my issue.

Here's the thread describing the issue: GitHub Issue

Answer 2

You can use the scope to connect between the tabs and the pane, bypassing the route:

<div class="tabbable">
                                <ul class="nav nav-tabs">
                                    <li ng-class="{'active':currentTab == 'Tab1'}">
                                        <a data-toggle="tab" ng-click="currentTab = 'Tab1'">Tab1</a>
                                    </li>
                                    <li ng-class="{'active':currentTab== 'Tab2'}">
                                        <a data-toggle="tab" ng-click="currentTab = 'Tab2'">Tab2</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane" ng-class="{'active':currentTab == 'Tab1'}" id="Tab1">
                                        <p>I'm in Section 1.</p>
                                    </div>
                                    <div class="tab-pane" ng-class="{'active':currentTab == 'Tab2'}" id="Tab2"> 
                                        <p>Howdy, I'm in Section 2.</p>
                                    </div>
                                </div>
                            </div>