<!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 */