Simple Tab Controls in AngularJS

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="loading">LOADING</div>
<div ng-app="TabsApp">
    <div id="tabs" ng-controller="TabsCtrl">
        <ul>
            <li ng-repeat="tab in tabs" 
                ng-class="{active:isActiveTab(tab.url)}" 
                ng-click="onClickTab(tab)">{{tab.title}}</li>
        </ul>
        <div id="mainView">
            <div ng-include="currentTab"></div>
        </div>
    </div>
    <script type="text/ng-template" id="one.tpl.html">
		<div id="viewOne">
			<h1>View One</h1>
			
		</div>
            <div ng-repeat="json in myJson" on-finish-render="ngRepeatFinished">
        <li>{{json}}</li>
    </div>
	</script>
	
	<script type="text/ng-template" id="two.tpl.html">
		<div id="viewTwo">
			<h1>View Two</h1>
			
		</div>
        <div ng-repeat="json in myJson" on-finish-render="ngRepeatFinished">
        <li>{{json}}</li>
    </div>
	</script>
	
	<script type="text/ng-template" id="three.tpl.html">
		<div id="viewThree">
			<h1>View Three</h1>
			
		</div>
         <div ng-repeat="json in myJson" on-finish-render="ngRepeatFinished">
        <li>{{json}}</li>
    </div
	</script>
</div>
    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

CSS

#loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #000;
}
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;
}
.loader{
	position: fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index: 99999;
}
.loader:after, body.pageload:after{
	position: fixed;
	top: 50%;
	left: 50%;
	content: '';
	background-image: url("http://code.jquery.com/mobile/1.4.2/images/ajax-loader.gif");	
	background-repeat: no-repeat;
	background-position: center  center;
	height: 70px;
	width: 70px;
	margin: -35px 0 0 -35px;
	background-color: #fff;	
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-border-radius:50%;
	border-radius:50%;
	
	box-shadow:0 0 15px #b4c4ea;
	-moz-box-shadow:0 0 15px #b4c4ea;
	-webkit-box-shadow:0 0 15px #b4c4ea;
	z-index: 10;
}

JavaScript

angular.module('components', [])
.directive('onFinishRender', function ($timeout) {    
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
           
        }
    }
});

angular.module('TabsApp', ['components'])
.controller('TabsCtrl', ['$scope', function ($scope,$timeout) {
   
    $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.onClickTab = function (tab) {
        $scope.currentTab = tab.url;
    }
    
    $scope.isActiveTab = function(tabUrl) {
        return tabUrl == $scope.currentTab;
    }
                      

 $scope.myJson = ["mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9","mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9","mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9","mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9","mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9","mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9","mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9","mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9","mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9","mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9","mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8", "mayank9","mayank1", "mayank2", "mayank3", "mayank4", "mayank5", "mayank6", "mayank7", "mayank8",...