show loading image on directive call on page load and ajax calls in AngularJS

Question

I want to show image on page load and ajax calls.So that i created a directive "lodder". In html page when i am using it is showing the alert ("hi direvtive"). but in detailscontroller.js i have written that $scope.loadingStatus=true so it should show the img but it is not displaying .

        -------------angular.js-------------
        var app= angular.module('myApp', ['ngRoute', 'ngAnimate', 'angular-ladda',                 'ui.bootstrap', 'uiSlider', 'ngCookies']);
       app.directive('lodder', function () {
            alert("hi direvtive");
            var directive = {
                restrict: 'A',
                template: '<div style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: rgb(102, 102, 102); z-index: 30001; opacity: 0.8;" ><p style="position: absolute; color: White; top: 50%; left: 50%;"><img src="http://localhost:60792/img/ajax-loader1.gif" ></p></div>',
                link: function (scope, element, attr) {
                    scope.$watch('loadingStatus', function (val) {
                  if (val)
                      $(element).show();
                  else
                      $(element).hide();
              });
          }
            };
            return directive;
        });
    ------------------html page------------
     <div class="content" ng-controller="detailsController" >
                              <lodder />-------------this is my directive
    --------------------detailsController.js------------
    var urlPrefix ='';
    function GetUsers() {
                $scope.loadingStatus = true;
                $http({
                    method: 'POST',
                    url: urlPrefix + '/Dashboard/GetUsers',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json"
                }).success(function (results) {
                    $scope.userslist = JSON.parse(results.userslist);
                    $scope.loadingStatus = false;
                })
                .error(function (results) {
                    $scope.error = "An Error has occured while loading posts!";
                    $scope.loadingStatus = false;
                });
            };
            GetUsers();
    ----------------------------finish------------------