I have a set of five tabs that are functioning correctly. However, when I refresh the page, the active tab reverts back to its default state instead of staying in its current active state. Can anyone help me identify where I may be making a mistake?
Here is the HTML code:
<div class="container">
<section ng-app="myApp" ng-controller="TabController as tab">
<ul class="nav nav-pills">
<li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Home</a></li>
<li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Underwriting</a></li>
<li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Operations</a></li>
</ul>
<div ng-show="tab.isSet(1)">
<h4>Home</h4>
</div>
<div ng-show="tab.isSet(2)">
<h4>Underwriting</h4>
</div>
<div ng-show="tab.isSet(3)">
<h4>Operations</h4>
</div>
</section>
</div>
And here is the JavaScript code:
(function () {
var app = angular.module('myApp', []);
app.controller('TabController', function () {
this.tab = 1; // This is where my logic seems to be failing.
this.setTab = function (tabId) {
this.tab = tabId;
};
this.isSet = function (tabId) {
return this.tab === tabId;
};
});
})();
For a working demo, you can visit http://jsfiddle.net/fwoxdjsu/