Simple Tab Controls in AngularJS

HTML

<div ng-app="TabsApp">
  <div id="tabs" ng-controller="TabsCtrl">
    <ul>
      <li class="navBack" ng-click="navBack()"></li>
      <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.title}}</li>
      <li class="navNext" ng-click="navNext()"></li>
    </ul>
    <div id="mainView">
     
      <div ng-include="currentTab"></div>
    </div>
  </div>
  
 
  <script type="text/ng-template" id="one.tpl.html">
    <div id="viewOne">
      <p>Tab One</p>
    </div>
  </script>

  <script type="text/ng-template" id="two.tpl.html">
    <div id="viewTwo">
      <p>Tab Two</p>
    </div>
  </script>

  <script type="text/ng-template" id="three.tpl.html">
    <div id="viewThree" ng-show="tab3==0">
      <p>Tab Three</p>
      <button type="button" class="btn btn-default" ng-click="test()">Test</button>
    </div>

    <div id="viewTesting" ng-show="tab3==1">
      <p>Tab Three-Testing</p>
      <p>Testing content</p>
      <button type="button" class="btn btn-default" ng-click="test1()">Test1</button>
    </div>

    <div id="viewSecondTesting" ng-show="tab3==2">
      <p>This is second testing</p>
      <button type="button" class="btn btn-default" ng-click="test2()">Test2</button>
    </div>
    
     <div id="viewThirdTesting" ng-show="tab3==3">
      <p>This is third testing</p>
    </div>
    
  </script>
</div>

CSS

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
li {
    float: left;
    border: 1px solid #000;
    border-bottom-width: 0;
    margin: 3px 3px 0px 3px;
    padding: 5px 5px 0px 5px;
    background-color: #CCC;
    color: #696969;
}
#mainView {
    border: 1px solid black;
	clear: both;
	padding: 0 1em;
}
.active {
    background-color: #FFF;
    color: #000;
}
.navBack{
  content: url('http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/black-ink-grunge-stamps-textures-icons-arrows/003683-black-ink-grunge-stamp-textures-icon-arrows-double-arrowhead-left.png');
width: 35px;
}
.navNext{
  width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid green;
}

JavaScript

angular.module('TabsApp', [])
  .controller('TabsCtrl', ['$scope', '$location', function($scope, $location) {
  
    $scope.tabs = [{
      title: 'One',
      url: 'one.tpl.html'
    }, {
      title: 'Two',
      url: 'two.tpl.html'
    }, {
      title: 'Three',
      url: 'three.tpl.html'
    }];

    $scope.currentTab = 'one.tpl.html';
    $scope.index = 0;

    $scope.onClickTab = function(tab) {
      $scope.currentTab = tab.url;
    }
    $scope.navBack = function(tab) {
      if($scope.index > 0)
      {
        $scope.index--;
      }
      $scope.currentTab = $scope.tabs[$scope.index].url;
      
    }
    
    $scope.navNext = function() {
      if( $scope.index < ($scope.tabs.length-1))
      {
        $scope.index++;
      }
      $scope.currentTab = $scope.tabs[$scope.index].url;
      
    }

    $scope.isActiveTab = function(tabUrl) {
      return tabUrl == $scope.currentTab;
    }

    $scope.tab3 = 0;
    
    $scope.test = function() {
    $scope.tab3 = 1;
    }

    $scope.test1 = function() {
    $scope.tab3 = 2;
    }
    
    $scope.test2 = function() {
    $scope.tab3 = 3;
    }
    
  }]);