How can I disable other tabs after clicking a particular tab? - angularjs

Question

I am trying to disable all other tabs when clicking on a particular tab. Means, suppose, initially when the application runs, tab1 appears as default. After that if I select tab2, all other tab should gets disabled and only gets enable back, when we click on Cancel button.
HTML code:
<tabset>
<tab
ng-repeat="t in tabs"
heading="{{t.heading}}"
select="go(t.route)"
active="t.active">
</tab>
</tabset>
<div ui-view></div>
JS code:
var app = angular.module("routedTabs", ["ui.router", "ui.bootstrap"]);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/main/tab1");
$stateProvider
.state("main", { abtract: true, url:"/main", templateUrl:"main.html" })
.state("main.tab1", { url: "/tab1", templateUrl: "tab1.html" })
.state("main.tab2", { url: "/tab2", templateUrl: "tab2.html" })
.state("main.tab3", { url: "/tab3", templateUrl: "tab3.html" })
.state("main.tab4", { url: "/tab4", templateUrl: "tab4.html" });
});
$scope.go = function(route){
$state.go(route);
};
$scope.active = function(route){
return $state.is(route);
};
$scope.tabs = [
{ heading: "Tab1", route:"main.tab1", active:false },
{ heading: "Tab2", route:"main.tab2", active:false },
{ heading: "Tab3", route:"main.tab3", active:false },
{ heading: "Tab4", route:"main.tab4", active:false },
];
$scope.$on("$stateChangeSuccess", function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});

Answer 1

Please find the code snippet below, Additionally added onSelectTab(). Let me know if you need any changes.
DEMO
HtmlFile
<div ng-controller="mainController">
<tabset>
<tab
ng-repeat="t in tabs"
heading="{{t.heading}}"
select="go(t.route, true)"
ng-click="onSelectTab(t)"
active="t.active"
disabled="flags.disableTab && !t.active">
</tab>
</tabset>
<button class="btn" ng-click="flags.disableTab = false">CANCEL</button>
<div ui-view></div>
</div>
controllerFile.js
app.controller("mainController", function($rootScope, $scope, $state, $timeout, $filter) {
$scope.flags = {};
$scope.go = function(route) {
$state.go(route);
};
//Additionally added below method
$scope.onSelectTab = function(t) {
if (t.heading == 'tab2') {
$scope.flags.disableTab = true;
}
};
//End
$scope.active = function(route) {
return $state.is(route);
};
$scope.tabs = [{
heading: "tab1",
route: "main.tab1",
active: false
}, {
heading: "tab2",
route: "main.tab2",
active: false
}, {
heading: "tab3",
route: "main.tab3",
active: false
}, {
heading: "tab4",
route: "main.tab4",
active: false
}, ];
$scope.$on("$stateChangeSuccess", function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});
});
Note: Accept the answer if it is works