var app = angular.module('plunker', []);

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.
      when('/jobs', {templateUrl: 'jobs-partial.html',   controller: JobsCtrl }).
      when('/invoices', {templateUrl: 'invoices-partial.html',   controller: InvoicesCtrl }).
      when('/payments', {templateUrl: 'payments-partial.html',   controller: PaymentsCtrl }).
      otherwise({redirectTo: '/jobs'});
      
      // make this demo work in plunker
      $locationProvider.html5Mode(false);
}]);

function TabsCtrl($scope, $location) {
  $scope.tabs = [
      { link : '#/jobs', label : 'Jobs' },
      { link : '#/invoices', label : 'Invoices' },
      { link : '#/payments', label : 'Payments' }
    ]; 
    
  $scope.selectedTab = $scope.tabs[0];    
  $scope.setSelectedTab = function(tab) {
    $scope.selectedTab = tab;
  }
  
  $scope.tabClass = function(tab) {
    if ($scope.selectedTab == tab) {
      return "active";
    } else {
      return "";
    }
  }
}

function JobsCtrl($scope) {
  
}

function InvoicesCtrl($scope) {
  
}

function PaymentsCtrl($scope) {
  
}
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <ul class="nav nav-tabs" ng-controller="TabsCtrl">
      <li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab"><a href="{{tab.link}}" ng-click="setSelectedTab(tab)">{{tab.label}}</a></li>
    </ul>
    <div ng-view></div>
  </body>

</html>
/* Put your css in here */

Jobs Tab
Invoices
Payments