Bootstrap nav-tabs not working with Angular $routeprovider
<p>I am using AngularJs and Bootstrap. While I am using <code>$RouteProvider</code> for SPA, I am using bootstrap for the layout. This is working fine.</p>

<p>However, I am now trying to use Bootstrap nav-tabs to have tab based navigations.</p>

<p>My HTML is like this:</p>

<pre><code>        &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
            &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
            &lt;div class="navbar-header"&gt;
                &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"&gt;
                    &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;a class="navbar-brand" href="#/mis"&gt;&lt;i class="fa fa-tachometer"&gt;&lt;/i&gt; TrigonMeter&lt;/a&gt;
            &lt;/div&gt;
            &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
            &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                &lt;ul id="tabs" class="nav navbar-nav nav-tabs container-fluid" data-tabs="tabs"&gt;
                    &lt;li class="active"&gt;&lt;a data-target="#db" href="#db" data-toggle="tab"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a data-target="#admin" href="#admin" data-toggle="tab"&gt;Admin&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a data-target="#mis" href="#mis" data-toggle="tab"&gt;MIS&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a data-target="#fin" href="#fin" data-toggle="tab"&gt;Finance&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;ul class="nav navbar-nav navbar-right"&gt;
                    &lt;li class="nav-link"&gt;Hi {{globals.currentUser.username}}&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" class="nav-link" ng-click="logout()"&gt;&lt;span class="glyphicon glyphicon-log-out"&gt;&lt;/span&gt;Logout&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
            &lt;!-- /.navbar-collapse --&gt;
        &lt;/nav&gt;
</code></pre>

<p>For the tabs. This works fine. And the following is the <code>tab-content</code> section:</p>

<pre><code>        &lt;div class="container-fluid"&gt;
            &lt;!--[if lt IE 7]&gt;
                &lt;p class="browsehappy"&gt;You are using an &lt;strong&gt;outdated&lt;/strong&gt; browser. Please &lt;a href="http://browsehappy.com/"&gt;upgrade your browser&lt;/a&gt; to improve your experience.&lt;/p&gt;
            &lt;![endif]--&gt;
            &lt;div class="row"&gt;
                &lt;div id="my-tab-content" class="tab-content col-sm-2 col-md-2 sidebar"&gt;
                    &lt;div class="tab-pane active" id="db"&gt;
                        &lt;h1&gt;Dashboard&lt;/h1&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#/admin/org"&gt;Organisation Details&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#/mis/jobno/"&gt;Job Numbers&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#/mis/jobexpenses/"&gt;Job Expenses&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#/mis/jobfindet/"&gt;Job Financial Details&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#/mis/contracts"&gt;Contracts&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                    &lt;div class="tab-pane" id="admin"&gt;
                        &lt;h1&gt;Admin&lt;/h1&gt;
                        &lt;p&gt;&lt;a href="#/admin/org" data-toggle="tab"&gt;Organisation Details&lt;/a&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="tab-pane" id="mis"&gt;
                        &lt;h1&gt;MIS&lt;/h1&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#/mis/jobno/" data-toggle="tab"&gt;Job Numbers&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#/mis/jobexpenses/" data-toggle="tab"&gt;Job Expenses&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#/mis/jobfindet/" data-toggle="tab"&gt;Job Financial Details&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#/mis/contracts" data-toggle="tab"&gt;Contracts&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/div&gt;
                    &lt;div class="tab-pane" id="fin"&gt;
                        &lt;h1&gt;Finance&lt;/h1&gt;
                        &lt;p&gt;orange orange orange orange orange&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="col-sm-10 col-md-10"&gt;
                    &lt;div ng-view&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>But The tab-content section is not working. </p>

<p>Please do let me know if I could explain the problem.</p>

<p>Is there a way to do this?</p>