Angular BlockUI

//Angular BlockUI 0.11
var xxxxxxModule = angular.module("xxxxxxModule", ['ngRoute', 'blockUI']).config(function ($routeProvider, $locationProvider) {

    //blockUIConfig.message = 'Please stop clicking!';
    //blockUIConfig.delay = 100;
    // Provide a custom template to use
    //blockUIConfig.templateUrl = '/Templates/block.html';
    //Path - it should be same as href link
    $routeProvider.when('/Admin/Accounts', { templateUrl: '/Templates/Accounts.html', controller: 'securityAccessController' })
                  .when('/Admin/ManageAccount', { templateUrl: '/Templates/ManageAccount.html', controller: 'manageAccountController' })
                  .otherwise({ redirectTo: '/Admin/ManageAccount' });
    $locationProvider.html5Mode(true);
});

//Customize the block UI look/message if this added
xxxxxxModule.config(function (blockUIConfig) {

    // Change the default overlay message
    blockUIConfig.message ="executing...";
    // Change the default delay to 100ms before the blocking is visible
    blockUIConfig.delay = 1;//.delay(1);
    // Disable automatically blocking of the user interface
    blockUIConfig.autoBlock = false;

});


xxxxxxModule.controller("manageAccountController", function ($scope, $location, xxxxxxService, blockUI) {
    //$scope.user = { Id: '0',Name:'New'  };
    $scope.showDelete = false;
    $scope.saveLabel = 'Create New User';
    //$scope.nameInfo = '';
    $scope.validationInfo = {};

    // Block the user interface
    blockUI.start();
    //$scope.blockUI_ = true;
    setTimeout(function () {
        xxxxxxxService.getAccounts().then(function (_users) {
            $scope.users = _users;
            $scope.user = { id: '-100', name: 'NEW' };
            $scope.users.unshift($scope.user);
            $scope.user = { Id: $scope.user.id, Name: $scope.user.name };
            securityAccessService.getEmployers().then(function (_employers) {
                $scope.employers = _employers;
                securityAccessService.getRoles().then(function (_roles) {
                    $scope.roles = _roles;
                    // Unblock the user interface
                    //setTimeout(function () { blockUI.stop(); }, 9000)
                    blockUI.stop();
                }, function ()
                { alert('error while fetching roles from server') });
            }, function ()
            { alert('error while fetching users from server') });


        }, function ()
        { alert('error while fetching users from server') });
    }, 9000);// for 1 and half minutes
});

xxxxxxModule.factory("xxxxxxService", function ($http, $q) {
    return {
        getAccounts: function () {
            // Get the deferred object
            var deferred = $q.defer();
            // Initiates the AJAX call
            $http({ method: 'GET', url: '/Admin/GetXXXXXDetails' }).success(deferred.resolve).error(deferred.reject);
            // Returns the promise - Contains result once request completes
            return deferred.promise;
        },
        getEmployers: function () {
            // Get the deferred object
            var deferred = $q.defer();
            // Initiates the AJAX call
            $http({ method: 'GET', url: '/Admin/GetXXXXXXXDetails' }).success(deferred.resolve).error(deferred.reject);
            // Returns the promise - Contains result once request completes
            return deferred.promise;
        },
        getRoles: function () {
            // Get the deferred object
            var deferred = $q.defer();
            // Initiates the AJAX call
            $http({ method: 'GET', url: '/Admin/GetXXXXDetails' }).success(deferred.resolve).error(deferred.reject);
            // Returns the promise - Contains result once request completes
            return deferred.promise;
        }
    }
});

And this is very important:

>@section customStyles{
    <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet"></link>
    <link href="~/Content/angular-block-ui.css" rel="stylesheet"></link>
    }
@section customHeadJS
{
    <script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-ui/ui-utils.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Scripts/angular-block-ui.js"></script>
}
<div ng-app="xxxxxxModule">

    <div class="container" block-ui="main" ng-class="{blockui:blockUI_==true}">
        <div class="navbar navbar-default">
            <div class="navbar-header">
                <ul class="nav navbar-nav">
                    <li class="navbar-brand"><a href="/Admin/Accounts">Members</a></li>
                    <li class="navbar-brand"><a href="/Admin/ManageAccount">Manager User</a></li>
                </ul>
            </div>
        </div>
        <div ng-view>
        </div>
    </div>
</div>

To use Jquery BlockUI instead:

    xxxApp.factory("validationService", function ($http, $q) {
        return {
            runValidation: function (member) {
                // Get the deferred object
                var deferred = $q.defer();                                
                $http({ method: 'POST', url: '/xxxProcess/Runxxxx', data: { xxxID: member.xxxId } }).success(deferred.resolve).error(deferred.reject);
                // Returns the promise - Contains result once request completes
                return deferred.promise;
            },
            displayBlock: function () {
                $.blockUI.defaults.css.border = 'hidden';//'2px solid black';
                $.blockUI.defaults.overlayCSS.backgroundColor = 'white';
                $.blockUI.defaults.overlayCSS.opacity = .6;
                $.blockUI({ message:'<h3><img src="/Images/busy.gif" /> Just a moment...</h3>' });
            },

            noMoreBlock: function () {
                $.unblockUI();
            }
        }
    });

..............

        $scope.runValidation = function (member) {
            validationService.displayBlock();
            validationService.runValidation(member).then(function (_data) {
                doSomethingHere(_data);
            }, function ()
            {
                alert('error while running Validation at server');
            }).finally(function () {
                $scope.getValidationErrors();
                validationService.noMoreBlock();
            });
            
        };