<!DOCTYPE html>
<html ng-app="app">
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script data-require="angular.js@*" data-semver="1.2.0-rc1" src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller='TestCtrl'>
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li ng-class="getTabClass(1)" ng-click="setActiveTab(1)"><a href="#deal" data-toggle="tab">Deal</a></li>
<li ng-class="getTabClass(2)" ng-click="setActiveTab(2)"><a href="#bond" data-toggle="tab">Bond</a></li>
<li ng-class="getTabClass(3)" ng-click="setActiveTab(3)"><a href="#collateral" data-toggle="tab">Collateral</a></li>
<li ng-class="getTabClass(4)" ng-click="setActiveTab(4)"><a href="#rating" data-toggle="tab">Rating</a></li>
</ul>
<div class="tab-content">
<div ng-class="getTabPaneClass(1)" id="deal">
{{tab1}}
</div>
<div ng-class="getTabPaneClass(2)" id="bond">
{{tab2}}
</div>
<div ng-class="getTabPaneClass(3)" id="collateral">
{{tab3}}
</div>
<div ng-class="getTabPaneClass(4)" id="rating">
{{tab4}}
</div>
</div>
</div>
</body>
</html>
// Code goes here
var myApp = angular.module('app',[]);
myApp.controller('TestCtrl', function($scope){
var tabClasses;
function initTabs() {
tabClasses = ["","","",""];
}
$scope.getTabClass = function (tabNum) {
return tabClasses[tabNum];
};
$scope.getTabPaneClass = function (tabNum) {
return "tab-pane " + tabClasses[tabNum];
}
$scope.setActiveTab = function (tabNum) {
initTabs();
tabClasses[tabNum] = "active";
};
$scope.tab1 = "This is first section";
$scope.tab2 = "This is SECOND section";
$scope.tab3 = "This is THIRD section";
$scope.tab4 = "This is FOURTH section";
//Initialize
initTabs();
$scope.setActiveTab(1);
});
/* Styles go here */