title: Add two tabs group in same page
body: <p>I'm trying to add two tabs group in same page ,but it works as one tab ,If i select first tab from tab group one it inactive  the selected tab in other group,How anyone help me to fix that?</p>
  
  <p>tab group one</p>
  
  <pre><code> &lt;div&gt;
          &lt;ul class="nav nav-tabs"&gt;
              &lt;!-- &lt;span class="pull-right small text-muted"&gt;1406 
          Elements&lt;/span&gt; --&gt;
              &lt;li ng-class="{'active' : tab == 1}"&gt;&lt;a ng-click="tab = 1"
                  ng-init="tab = 1"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;Program Summary&lt;/a&gt;&lt;/li&gt;
              &lt;li ng-class="{'active' : tab == 2}"&gt;&lt;a ng-click="tab = 2"&gt;&lt;i
                      class="fa fa-briefcase"&gt;&lt;/i&gt;Risk Summary&lt;/a&gt;&lt;/li&gt;
              &lt;li ng-class="{'active' : tab == 3}"&gt;&lt;a ng-click="tab = 3"&gt;&lt;i
                      class="fa fa-briefcase"&gt;&lt;/i&gt;Others&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
          &lt;div class="tab-content"&gt;
              &lt;div id="tab-1" class="tab-pane active" ng-show="tab == 1"&gt;
                  &lt;div class="ibox-content"&gt;
                      &lt;div style="height: 250px; margin: 0 auto" /&gt;
                      TAB1
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="tab-2" class="tab-pane active" ng-show="tab == 2"&gt;
                  &lt;div class="ibox-content"&gt;
                      &lt;div style="height: 250px; margin: 0 auto" /&gt;
                      TAB2
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="tab-3" class="tab-pane active" ng-show="tab == 3"&gt;
                  &lt;div class="ibox-content"&gt;
                      &lt;div style="height: 250px; margin: 0 auto" /&gt;
                      TAB3
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>tab group two</p>
  
  <pre><code>    &lt;div&gt;
          &lt;ul class="nav nav-tabs"&gt;
              &lt;!-- &lt;span class="pull-right small text-muted"&gt;1406 Elements&lt;/span&gt; --&gt;
              &lt;li ng-class="{'active' : tab == 11}"&gt;&lt;a ng-click="tab = 11"
                  ng-init="tab = 11"&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;Program Summary&lt;/a&gt;&lt;/li&gt;
              &lt;li ng-class="{'active' : tab == 22}"&gt;&lt;a ng-click="tab =22"&gt;&lt;i
                      class="fa fa-briefcase"&gt;&lt;/i&gt;Risk Summary&lt;/a&gt;&lt;/li&gt;
              &lt;li ng-class="{'active' : tab == 33}"&gt;&lt;a ng-click="tab =33"&gt;&lt;i
                      class="fa fa-briefcase"&gt;&lt;/i&gt;Others&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
          &lt;div class="tab-content"&gt;
              &lt;div id="tab-11" class="tab-pane active" ng-show="tab == 11"&gt;
                  &lt;div class="ibox-content"&gt;
                      &lt;div style="height: 250px; margin: 0 auto" /&gt;
                      TAB1
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="tab-22" class="tab-pane active" ng-show="tab ==22"&gt;
                  &lt;div class="ibox-content"&gt;
                      &lt;div style="height: 250px; margin: 0 auto" /&gt;
                      TAB2
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="tab-33" class="tab-pane active" ng-show="tab ==33"&gt;
                  &lt;div class="ibox-content"&gt;
                      &lt;div style="height: 250px; margin: 0 auto" /&gt;
                      TAB3
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>