Simple Tab Controls in AngularJS

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<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>

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;
}
.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) {
            if (scope.$last === true) {
                
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

angular.module('TabsApp', ['components'])
.controller('TabsCtrl', ['$scope', function ($scope,$timeout) {
    $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
        removeLoader();

    });
    $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) {
                      showLoader();
        $scope.currentTab = tab.url;
    }
    
    $scope.isActiveTab = function(tabUrl) {
        return tabUrl == $scope.currentTab;
    }
                      
function showLoader() {
    
    $('body').append('<div class="loader"></div>');
}

function removeLoader() {
    
    $('.loader').fadeOut(function () {
        $(this).remove();
    });
}
 $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",...