I have two tabs menus, the first one is created dynamically and the second one has a static first tab with other tabs created dynamically using ng repeat. My question is how to make the first static tab in the second menu selected no matter what the user selects from the first tabs? I tried setting 'active' but it's still not working correctly.
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>
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]);
}());