How to change active tab's style when page loads - css

Question

I am trying to create a tab using bootstrap. Everything is set except while page loads, the active tab's style is not changed. If we click the individual tab the style is changed correctly. Only in the page load, it is not working.
I have created a plunker and given below the link.
plunker = link
My requirement is when page loads the first tab (that is active tab) will be shown in a different style.
Thanks in advance for your help.

Answer 1

let me know if any query, as you have mentioned that this is usful for you :
http://jsfiddle.net/simonbingham/bFWUM/
(function () {
var app = angular.module('myApp', []);
app.controller('TabController', function () {
this.tab = 1;
this.setTab = function (tabId) {
this.tab = tabId;
};
this.isSet = function (tabId) {
return this.tab === tabId;
};
});
})();
<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)">Tab 1</a></li>
<li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Tab 2</a></li>
<li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Tab 3</a></li>
</ul>
<div ng-show="tab.isSet(1)">
<h4>Tab 1</h4>
</div>
<div ng-show="tab.isSet(2)">
<h4>Tab 2</h4>
</div>
<div ng-show="tab.isSet(3)">
<h4>Tab 3</h4>
</div>
</section>
</div>