AngularJS Loading directive

HTML

<div ng-app="app">
    <div ng-controller="TestingCtrl">
         <h2>{{title}}</h2>
        
        <loading-bar ng-if="loading"></loading-bar>
        
    </div>    
</div>

JavaScript

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

app.controller('TestingCtrl', ['$scope','$timeout', function ($scope,$timeout) {
    $scope.title = 'AngularJS Loading Indicator';
    
    $timeout(function() {
        $scope.loading = !$scope.loading;
        alert($scope.loading);
    }, 3000);
}]);

/*
Directive to show "loading" indicator. Requires scope to set loading=true/false
*/
app.directive('loadingBar', function() {
    return {
        restrict: 'EA',
        // Replace text with GIF
        template: '<div>Loading...</div>'
    }
});