Sarath Lal Sarath Lal -4 years ago 106
AngularJS Question

How to change active tab's style when page loads

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 =

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 Source

let me know if any query, as you have mentioned that this is usful for you :

(function () {
    var app = angular.module('myApp', []);

    app.controller('TabController', function () { = 1;

        this.setTab = function (tabId) {
   = tabId;

        this.isSet = function (tabId) {
            return === 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>
        <div ng-show="tab.isSet(1)">
             <h4>Tab 1</h4>
        <div ng-show="tab.isSet(2)">
             <h4>Tab 2</h4>
        <div ng-show="tab.isSet(3)">
             <h4>Tab 3</h4>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download