block-ui-pattern has no effect

i am trying to implement block-ui into our angular application on an element by element basis. (everything is included, referenced and injected correctly)

1. We have been trying to implement

   block-ui-pattern
   

   with no success.

our $http request is :-

 $http.get('/user/123/GetUserAddress/').then(function (data) {

and our block-ui-pattern is :-

 < div block-ui block-ui-pattern="/^user\/123\/GetUserAddress\$/">
{{address}}
</div>

This seems to match the documentation, but is failing to work. Am i missing something fundamental?

2. Our application exposes an isloading flag. initially set to true, and when the $http promise returns, sets this to false.. I realize that it is not in the documentation, however, Is there a way to set

   < div block-ui="isloading"></div>
   

Post by Parash Gami pointed me in the right direction. I actually ended up writing a custom directive that wraps block-ui

var myBlocker = angular.module('app.Angular.Directive.myBlocker ', []);

myBlocker.directive('myBlocker ', ['$compile', function ($compile) {
return {
    restrict: 'A',
    scope :{
        blockId: '@id',
        block: '=',
    },
    controller: ['$scope', 'blockUI', function ($scope, blockUI) {
        var myBlock = blockUI.instances.get($scope.blockId);

        $scope.$watch('block', function (newValue, oldValue) {
            if ($scope.block === true)
            {
                myBlock.start()
            }
            else {
                myBlock.stop()
            }
        });


    }],
    link: function link(scope, element, attrs) {
        element.attr('block-ui', scope.blockId);
        element.attr('style', 'min-height:200px;');
        element.removeAttr("my-blocker"); 
        element.removeAttr("data-my-blocker");
        $compile(element)(scope);
    }
};

}]);

This allows me to now simply add the directive to an element

< div id="myId" my-blocker block="loading">