title: Bootstrap tab active tab color
body: <p>I m using the Bootstrap tab controller. Please check my sample</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="btn-group" role="group"&gt;
      &lt;button type="button" id="shares" class="btn btn-primary" href="#one" data-toggle="tab"&gt;&lt;span
              class="fa fa-address-card-o" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;div class="hidden-xs"&gt;One&lt;/div&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="btn-group" role="group"&gt;
      &lt;button type="button" id="shares" class="btn btn-primary" href="#two" data-toggle="tab"&gt;&lt;span
              class="fa fa-address-card-o" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;div class="hidden-xs"&gt;One&lt;/div&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane fade in active" id="one"&gt;
          One Content
      &lt;/div&gt;
      &lt;div class="tab-pane" id="two"&gt;
          Two Content
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using below jQuery code for highlighting a selected tab header.</p>
  
  <pre><code>$(document).ready(function() {
      $(".btn").click(function () {
          $(".btn").removeClass("btn-primary").addClass("btn-default");
          $(this).removeClass("btn-default").addClass("btn-primary");   
      });
  });
  
  </code></pre>
  
  <p>Tabs are working well with the above function. But I need to do this function using Angular JS. Could you advise me, please?</p>