I am facing an issue with setting up two buttons to switch to other two tabs on click, as it is not functioning properly.
Below is the snippet of HTML code:
<div ng-controller="TabCtrl">
<uib-tabset class="tabbable">
<uib-tab heading="my tab 0" ng-attr-active="tabs[0].active">
<div class="row">
<a class="btn btn-wide btn-azure" ng-click="go_tab1()">
Go To tab 1
</a>
<a class="btn btn-wide btn-azure" ng-click="go_tab2()">
Go To tab 2
</a>
</div>
</uib-tab>
<uib-tab heading="my tab 1" ng-attr-active="tabs[1].active">
<div class="row">
</div>
</uib-tab>
<uib-tab heading="my tab 2" ng-attr-active="tabs[2].active">
<div class="row">
</div>
</uib-tab>
</uib-tabset>
</div>
Here is the controller code:
$scope.tabs = [{active: true}, {active: false}, {active: false}];
$scope.go_tab1 = function() {
$scope.tabs[1].active = true;
};
$scope.go_tab2 = function() {
$scope.tabs[2].active = true;
};