在同一页面中添加两个选项卡组

Question

我正在尝试在同一页面中添加两个选项卡组，但它可以作为一个选项卡使用，如果我从选项卡组中选择第一个选项卡，则它会激活其他组中的选定选项卡，如何帮助我解决这个问题？ / p>

标签组一

 <div>
        <ul class="nav nav-tabs">
            <!-- <span class="pull-right small text-muted">1406 
        Elements</span> -->
            <li ng-class="{'active' : tab == 1}"><a ng-click="tab = 1"
                ng-init="tab = 1"><i class="fa fa-user"></i>Program Summary</a></li>
            <li ng-class="{'active' : tab == 2}"><a ng-click="tab = 2"><i
                    class="fa fa-briefcase"></i>Risk Summary</a></li>
            <li ng-class="{'active' : tab == 3}"><a ng-click="tab = 3"><i
                    class="fa fa-briefcase"></i>Others</a></li>

        </ul>
        <div class="tab-content">
            <div id="tab-1" class="tab-pane active" ng-show="tab == 1">
                <div class="ibox-content">
                    <div style="height: 250px; margin: 0 auto" />
                    TAB1
                </div>
            </div>
            <div id="tab-2" class="tab-pane active" ng-show="tab == 2">
                <div class="ibox-content">
                    <div style="height: 250px; margin: 0 auto" />
                    TAB2
                </div>
            </div>
            <div id="tab-3" class="tab-pane active" ng-show="tab == 3">
                <div class="ibox-content">
                    <div style="height: 250px; margin: 0 auto" />
                    TAB3
                </div>
            </div>
        </div>
    </div>

标签组二

    <div>
        <ul class="nav nav-tabs">
            <!-- <span class="pull-right small text-muted">1406 Elements</span> -->
            <li ng-class="{'active' : tab == 11}"><a ng-click="tab = 11"
                ng-init="tab = 11"><i class="fa fa-user"></i>Program Summary</a></li>
            <li ng-class="{'active' : tab == 22}"><a ng-click="tab =22"><i
                    class="fa fa-briefcase"></i>Risk Summary</a></li>
            <li ng-class="{'active' : tab == 33}"><a ng-click="tab =33"><i
                    class="fa fa-briefcase"></i>Others</a></li>

        </ul>
        <div class="tab-content">
            <div id="tab-11" class="tab-pane active" ng-show="tab == 11">
                <div class="ibox-content">
                    <div style="height: 250px; margin: 0 auto" />
                    TAB1
                </div>
            </div>
            <div id="tab-22" class="tab-pane active" ng-show="tab ==22">
                <div class="ibox-content">
                    <div style="height: 250px; margin: 0 auto" />
                    TAB2
                </div>
            </div>
            <div id="tab-33" class="tab-pane active" ng-show="tab ==33">
                <div class="ibox-content">
                    <div style="height: 250px; margin: 0 auto" />
                    TAB3
                </div>
            </div>
        </div>
    </div>