How to disable/hide the tabs inside a bootstrap modal? - angularjs

Question

I have a bootstrap modal inside that I have Tabs. At present all tabs are displaying. I need to hide/disable the tabs so that at a time only one active tab is displayed. When I click on next and previous button the enabling and disabling action of tabs should take place. Kindly help me
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div role="tabpanel">
<ul class="nav nav-tabs">
<li class="active">first</li>
<li>second</li>
<li>third</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">First tab content</div>
</div>
<md-button class="md-raised md-primary" ng-click="goNext()">Next</md-button>
<md-button class="md-warn md-raised" ng-click="goPrevious()">Previous</md-button>
<div class="tab-pane" id="tab2">Second tab content></div>
<md-button class="md-raised md-primary" ng-click="goNext()">Next</md-button>
<md-button class="md-warn md-raised" ng-click="goPrevious()">Previous</md-button>
</div>
</div>
</div>
</div>

Answer 1

Let's say your controller is something like this:
angular.controller('TabController', ['$scope', function($scope) {
$scope.tab = 1;
this.changeTab = function(tab) {
$scope.tab = tab;
}
}]);
You can add ng-clicks to the tabs anchors and an ng-if (or ng-show/ng-hide if you prefer) to the tab-panes, like this:
<div role="tabpanel"
ng-controller="TabController as ctrl">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" ng-click="ctrl.changeTab(1)">
first
</a>
</li>
<li>
<a href="#tab2" ng-click="ctrl.changeTab(2)">
second
</a>
</li>
<li>
<a href="#tab3" ng-click="ctrl.changeTab(3)">
third
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active"
ng-if="tab === 1">
First tab content
</div>
<div class="tab-pane active"
ng-if="tab === 2">
Second tab content
</div>
<div class="tab-pane active"
ng-if="tab === 3">
Third tab content
</div>
</div>