AngularJS Example

by tonyleeper

HTML

<section ng-controller="PanelController as panel">
    <ul class="nav">
        <li ng-class="{active: panel.isActiveTab(1)}" ng-click="panel.setActiveTab(1)">one</li>
        <li ng-class="{active: panel.isActiveTab(2)}" ng-click="panel.setActiveTab(2)">two</li>
        <li ng-class="{active: panel.isActiveTab(3)}" ng-click="panel.setActiveTab(3)">three</li>
    </ul>
</section>

CSS

.active {
    color: #fff;
    background-color: teal;
}

JavaScript

var PanelController = function () {
    this.tab = 1;
    this.setActiveTab = function (tab) {
        this.tab = tab;
    }
    this.isActiveTab = function (tab) {
        return this.tab === tab;
    }
};