AngularJS Tabs bootstrap

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="https://rawgithub.com/angular/angular.js/v1.0.8/src/bootstrap/bootstrap.js"></script>
  <script src="app.js"></script> 
</head>
<body ng-controller="MainCtrl">
  $location.path() = {{location.path()}}
  <div ng-view></div>
</body>

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

var tabs = [1,2,3];

var app = angular.module('plunker', ['bootstrap'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    
    $routeProvider
      .when("/tab/:tabId", {
        templateUrl: 'tabs.html'
      })
      .otherwise({
        redirectTo: "/tab/1"
      });
}]);


app.controller('MainCtrl', function($scope, $location) {
  $scope.tabs = tabs;
  $scope.location = $location;
});

app.controller("TabsCtrl", function($scope, $routeParams, $location) {
  
  //Each time controller is recreated, check tab in url
  $scope.currentTab = +$routeParams.tabId; //+ to parse to int

  $scope.$watch('currentTab', function(id, oldId) {
    if (id !== oldId) {
      $location.path('/tab/'+id);
    }
  });
});

/* Put your css in here */

<div ng-controller="TabsCtrl">
  <div class="tabbable" ng-model="currentTab">
      <div class="tab-pane well" ng-repeat="id in tabs" title="Tab {{id}}" value="{{id}}">
        Tab Content {{id}}!
      </div>
  </div>
</div>