title: The Right Way to Do Tab Navigation in AngularJS / Bootstrap
body: <p>I want to set up tab based navigation for a web site using AngularJs and Bootstrap and I want to do it the 'right' way. As far as I can tell the 'right' way to set up an angular site is via the <a href="https://github.com/angular/angular-seed" rel="nofollow noreferrer">AngularJS Seed</a>. I implemented this and what I got as a templated multi file tab site with the following basic ingredients.</p>
  
  <p><strong>With Angular</strong></p>
  
  <p>index.html:</p>
  
  <pre><code>  &lt;ul class="nav nav-tabs"&gt;
       &lt;li  class="active"&gt;&lt;a href="#/view1"&gt;Home&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#/view2"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;div ng-view&gt;&lt;/div&gt;
    &lt;div&gt;Angular seed app: v&lt;span app-version&gt;&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>view1.js:</p>
  
  <pre><code>'use strict';
  
  angular.module('myApp.view1', ['ngRoute'])
  
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {
      templateUrl: 'view1/view1.html',
      controller: 'View1Ctrl'
    });
  }])
  
  .controller('View1Ctrl', [function() {
  
  }]);
  </code></pre>
  
  <p>view1.html:</p>
  
  <pre><code>&lt;div&gt;here's some html&lt;/div&gt;
  </code></pre>
  
  <p>...for view2.</p>
  
  <p><strong>With Bootstrap</strong></p>
  
  <p>As far as I can tell the 'right' way to implement tabs with bootstrap is as follows:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;div id="content"&gt;
      &lt;ul id="tabs" class="nav nav-tabs" data-tabs="tabs"&gt;
          &lt;li class="active"&gt;&lt;a href="#red" data-toggle="tab"&gt;Red&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#orange" data-toggle="tab"&gt;Orange&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#yellow" data-toggle="tab"&gt;Yellow&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#green" data-toggle="tab"&gt;Green&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#blue" data-toggle="tab"&gt;Blue&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="my-tab-content" class="tab-content"&gt;
          &lt;div class="tab-pane active" id="red"&gt;
              &lt;h1&gt;Red&lt;/h1&gt;
              &lt;p&gt;red red red red red red&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="orange"&gt;
              &lt;h1&gt;Orange&lt;/h1&gt;
              &lt;p&gt;orange orange orange orange orange&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="yellow"&gt;
              &lt;h1&gt;Yellow&lt;/h1&gt;
              &lt;p&gt;yellow yellow yellow yellow yellow&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="green"&gt;
              &lt;h1&gt;Green&lt;/h1&gt;
              &lt;p&gt;green green green green green&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="blue"&gt;
              &lt;h1&gt;Blue&lt;/h1&gt;
              &lt;p&gt;blue blue blue blue blue&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>After lots of messing around I still can't seem to get the boot strap functionality, using Angulars templated model. Can anyone advise me on the 'right' way to do this?</p>