how to make the fist static tab on 2nd menu tabs selected what ever user select from first tabs?

Question

I have 2 tabs menus first one created dynamically and the second one first tab is static and other are dynamically created using ng repeat my quetion is how to make the fist static tab on 2nd menu tabs selected what ever user select from first tabs? I use setting active but still not working right

html

            <tabset>
                <tab ng-repeat="tab in countytabs" heading="{{tab.countyName}}" select="selectAllUserByCounty(tab.countyID)">
                    <h3>{{tab.countyName}}--{{tab.phoneNumber}} </h3>
                    <tabset>
                        <tab heading="All" active="active.all" select="selectAllUserByCounty(tab.countyID)">
                            <br />
                            <span>Total:{{totalStatusforByCounty.total}}, In:{{totalStatusforByCounty.in}}, Out:{{totalStatusforByCounty.out}}, Unknown: {{totalStatusforByCounty.unknown}} at {{totalStatusforByCounty.lastUpdatedDateTime | date:"MM/dd/yyyy 'at' h:mma"}} </span>
                            <br />
                            <div ng-repeat="groupUsers in allUserByCounty">
                                <h6>
                                    <b>{{groupUsers.title}}</b>
                                </h6>
                                <table ng-repeat="user in groupUsers.users">
                                    <tr>
                                        <td>{{user.firstName}} {{user.lastName}} Ext:{{user.voiceMailExt}} </td>
                                    </tr>
                                </table>
                            </div>
                        </tab>
                        <tab ng-repeat="departmentGroup in departmentGroups" heading="{{departmentGroup.name}}" select="selectAllUserByCountyAndDepartmentGroup(tab.countyID,departmentGroup.id)">
                            {{departmentGroup.name}}<br />
                            {{tab.countyID}}<br />
                            {{departmentGroup.id}}<br />

                            <div>
                                <p>
                                    <span>
                                        Total:{{totalStatusforByCountyAndDepartmentGroup.total}}, In:{{totalStatusforByCountyAndDepartmentGroup.in}}, Out:{{totalStatusforByCountyAndDepartmentGroup.out}}, Unknown: {{totalStatusforByCountyAndDepartmentGroup.unknown}} at {{totalStatusforByCountyAndDepartmentGroup.lastUpdatedDateTime | date:"MM/dd/yyyy 'at' h:mma"}}
                                    </span>
                                </p>
                            </div>

                            <div ng-repeat="groupUsers in allUserByCountyAndDepartmentGroup">
                                <h6>
                                    <b>{{groupUsers.title}}</b>
                                </h6>
                                <table ng-repeat="user in groupUsers.users">
                                    <tr>
                                        <td>{{user.firstName}} {{user.lastName}} Ext:{{user.voiceMailExt}} </td>
                                    </tr>
                                </table>
                            </div>
                        </tab>
                    </tabset>
                </tab>
            </tabset>
        </div>

my controller

(function(){
    'use strict';

    var app = angular.module('usersboard');

    var ReceptionController = function($scope, ReceptionService){

        $scope.countytabs = '';
        $scope.totalStatusforAllCounties ='';
        $scope.totalStatusforByCounty = '';
        $scope.departmentGroups = '';
        $scope.totalStatusforByCountyAndDepartmentGroup = '';
        $scope.allUserByCountyAndDepartmentGroup = '';
        $scope.allUserByCounty = '';
        $scope.AllUserInAllDepartmentGroupsGroupByCounties = '';
        $scope.AllUsersInDepartmentGroup= '';
        $scope.active = {
            all: false
        };
        $scope.content = 'county';
        $scope.isShown = function (content) {
            return content === $scope.content;
        };

        var selectAllCounties = function(){
            ReceptionService.selectAllCounties().then(function(data){
                $scope.countytabs = data;

            }, function(errMsg){
                console.log(errMsg);
            });
        }
        selectAllCounties();

        var selectTotalStatusforAllCounties = function(){
            ReceptionService.selectTotalStatusforAllCounties().then(function(data){
                $scope.totalStatusforAllCounties = data;
                console.log(data);
            }, function(errMsg){
                console.log(errMsg);
            });
        }
        selectTotalStatusforAllCounties();

        var selectAllDepartmentGroups = function(){
            ReceptionService.selectAllDepartmentGroups().then(function (data) {
                $scope.departmentGroups = data;
                console.log(data);
            }, function (errMsg) {
                console.log(errMsg);
            });
        }
        selectAllDepartmentGroups();

        $scope.selectTotalStatusforByCounty = function (id) {
            if (typeof id !== 'undefined'){
                ReceptionService.selectTotalStatusforByCounty(id).then(function (data) {
                    $scope.totalStatusforByCounty = data;
                    console.log($scope.totalStatusforByCounty);
                }, function (errMsg) {
                    console.log(errMsg);
                });
            }

        }
        $scope.selectTotalStatusforByCountyAndDepartmentGroup = function (countyId, departmentGroup) {
            ReceptionService.selectTotalStatusforByCountyAndDepartmentGroup(countyId, departmentGroup).then(function (data) {
                $scope.totalStatusforByCountyAndDepartmentGroup = data;
                console.log($scope.totalStatusforByCountyAndDepartmentGroup);
            }, function (errMsg) {
                console.log(errMsg);
            });
        }
        $scope.selectAllUserByCountyAndDepartmentGroup = function (countyId, departmentGroup){
            $scope.selectTotalStatusforByCountyAndDepartmentGroup(countyId, departmentGroup);
            ReceptionService.selectAllUserByCountyAndDepartmentGroup(countyId, departmentGroup).then(function (data) {
                $scope.allUserByCountyAndDepartmentGroup = data;

            }, function (errMsg) {
                console.log(errMsg);
            });
        }
        $scope.selectAllUserByCounty = function (countyId) {

                $scope.selectTotalStatusforByCounty(countyId);
                ReceptionService.selectAllUserByCounty(countyId).then(function(data){
                    $scope.allUserByCounty = data;


                }, function(errMsg){
                    console.log(errMsg);
                });

        }

        $scope.selectAllUserInAllDepartmentGroups = function () {

            ReceptionService.selectAllUserInAllDepartmentGroups().then(function (data) {
                $scope.AllUserInAllDepartmentGroupsGroupByCounties = data;

            }, function (errMsg) {
                console.log(errMsg);
            });
        }
        $scope.selectAllUsersInDepartmentGroups = function (departmentGroupId) {

            ReceptionService.selectAllUsersInDepartmentGroup(departmentGroupId).then(function (data) {
                $scope.AllUsersInDepartmentGroup = data;

            }, function (errMsg) {
                console.log(errMsg);
            });
        }


    };

    app.controller('ReceptionController', ['$scope', 'ReceptionService', '$window', ReceptionController]);

}());

Answer 1

When the parent tab is clicked, set a variable (in my example, tab.activate1) to true. Then, use that value to activate first child tab:

<tabset>
<tab ng-repeat="tab in countytabs" ng-click="tab.activate1 = true" heading="{{tab.countyName}}">
  <h3>{{tab.countyName}}--{{tab.phoneNumber}} </h3>
  <tabset>
    <tab heading="All" active="tab.activate1"></tab>
    <tab heading="Detail 1"></tab>
    <tab heading="Detail 2"></tab>
  </tabset>
</tab>
</tabset>

Here is a working demo: http://plnkr.co/edit/Wcs2hdVtem5b2gzbCy5L?p=preview