angular.module('app', ['ngRoute']);

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

app.config(['$provide', function($provide) {
  //catch backend requests
  $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
}]).run(['$httpBackend',function($httpBackend){
  
  
  //setup fake backend
	$httpBackend.whenPOST('/rbac').respond(function(method, url, data, headers){
		console.log('Backend Requested: ' + data);
		var response = {};

		data = angular.fromJson(data);
		angular.forEach(data, function(value, key) {
			response[value] = false;
			
			//ok, let's suppose that only 'User' auth item is allowed.
			if(value == 'User')
				response[value] = true;
		});

		return [200, response, {}];
	});

  //ignore any GET requests
	$httpBackend.whenGET().passThrough();
}]);

/**
 * Index page
 */
app.controller('indexController', ['$scope', 'rbac', function($scope, rbac){  
  rbac.checkAccess('User').then(function(allow) {
		if(allow)
			alert('User is allowed!');
  });
  
  rbac.checkAccess('Admin').then(function(allow) {
    if(allow === false)
			alert('You are not admin!');
  });
}]);
<!DOCTYPE html>
<html ng-app="app1">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular-route.js"></script>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular-mocks.js"></script>
    <script src="app.js"></script>
    <script src="rbac.js"></script>
  </head>

  <body ng-controller="indexController">
    <p allow="Guest">Hello Guest</p>
    <p allow="User">Hello User</p>
    <p allow="Admin">Hello Admin</p>
  </body>

</html>
/* Put your css in here */

angular.module('app').provider('rbac', function() {
	//we don't wanna really cache it, we just wanna save states during application is still active
	var cache = {};

	this.$get = ['$http', function($http) {
		return {
			checkAccess: function(item) {
				console.log('CheckAccess(' + item + ') = ' + cache[item]);

				//already requested?
				if(cache[item] !== undefined)
					return cache[item];

				//to prevent infinitive digest
				cache[item] = false;

				//ok, let's request backend
				return $http.post('/rbac', [ item ]).then(function success(response) {
					cache[item] = response.data[item];
					return cache[item];
				});
			}
		}
	}];
});

angular.module('app').directive('allow', ['$animate', '$rootScope', 'rbac', function($animate, $rootScope, rbac) {
	return {
		transclude: 'element',
		priority: 1000,
		terminal: true,
		restrict: 'A',
		compile: function (element, attr, transclude) {
			return function ($scope, $element, $attr) {
				var childElement, childScope;

				$rootScope.$watch(function(scope) { return rbac.checkAccess($attr.allow); }, function allowWatchAction(value) {
					if (childElement) {
						$animate.leave(childElement);
						childElement = undefined;
					}

					if (childScope) {
						childScope.$destroy();
						childScope = undefined;
					}

					if(value) {
						childScope = $scope.$new();
						transclude(childScope, function (clone) {
							childElement = clone;
							$animate.enter(clone, $element.parent(), $element);
						});
					}
				});
			}
		}
	};
}]);