title: angularjs vs twitter bootstrap tabs javascript
body: <p>I'm making my first steps with angularJS. In the "code school" video (<a href="http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/2/section/2/video/1" rel="nofollow">http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/2/section/2/video/1</a>) there is a sample code that makes tabs in angular:</p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;section class="tab" ng-controller="TabController as tab"&gt;
      &lt;ul class="nav nav-pills"&gt;
        &lt;li ng-class="{active:tab.isSet(1)}"&gt;
          &lt;a href ng-click="tab.setTab(1)"&gt;Description&lt;/a&gt;&lt;/li&gt;
        &lt;li ng-class="{active:tab.isSet(2)}"&gt;
          &lt;a href ng-click="tab.setTab(2)"&gt;Specs&lt;/a&gt;&lt;/li&gt;
        &lt;li ng-class="{active:tab.isSet(3)}"&gt;
          &lt;a href ng-click="tab.setTab(3)"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div ng-show="tab.isSet(1)"&gt;
        &lt;h4&gt;Description&lt;/h4&gt;
        &lt;blockquote&gt;{{product.description}}&lt;/blockquote&gt;
      &lt;/div&gt;
      &lt;div ng-show="tab.isSet(2)"&gt;
        &lt;h4&gt;Specs&lt;/h4&gt;
        &lt;blockquote&gt;Shine: {{product.shine}}&lt;/blockquote&gt;
      &lt;/div&gt;
      &lt;div ng-show="tab.isSet(3)"&gt;
        &lt;h4&gt;Reviews&lt;/h4&gt;
        &lt;blockquote&gt;&lt;/blockquote&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>  app.controller('TabController', function(){
      this.tab = 1;
  
      this.setTab = function(newValue){
        this.tab = newValue;
      };
  
      this.isSet = function(tabName){
        return this.tab === tabName;
      };
    });
  </code></pre>
  
  <p>I know that twitter bootstrap has its own JavaScript for managing dynamic tabs (<a href="http://getbootstrap.com/javascript/#tabs" rel="nofollow">http://getbootstrap.com/javascript/#tabs</a>).</p>
  
  <p>My question is: is angularjs using bootstrap javascript here? I guess not. And if not (while this means angular is using only bootstrap's CSS), then why is angular reinventing the wheel = implementing new code that does the same thing as bootstrap's javascript code? I mean, why writing different code that does the same stuff, why not to use existing code?</p>
  
  <p>Maybe it's just a matter of this tutorial - but is there a way to make angular use native bootstrap's javascript?</p>