Javascript 如何使第二个菜单选项卡上的第一个静态选项卡与用户从第一个选项卡中选择的选项卡相同？

我有两个选项卡菜单，第一个是动态创建的，第二个是静态的，另一个是使用ng动态创建的。重复我的问题是如何使第二个菜单选项卡上的第一个静态选项卡被选中，用户从第一个选项卡中选择了什么？我使用“设置为活动”，但仍然无法正常工作

html

---

单击父选项卡时，将变量（在我的示例中，

tab.activate1

）设置为true。然后，使用该值激活第一个子选项卡：

<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>

{{tab.countyName}--{{tab.phoneNumber}

---

这是一个有效的演示：

旁注-您的HTML和控制器代码看起来非常大。它可能应该被分解成指令。@DavidGrinberg我知道我的HTML太大了，但现在它是原型，我很快就会分解它，我得到了这个概念。这是一个错误的决定。了解如何使用指令，并从一开始就使用它们。它在不太长的时间内就有回报。你能创造一个plnkr/小提琴吗？

(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]);

}());

<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>