Angularjs ng-show method - angularjs

Question

I have this angular application where I want to display some data based on permissions so on my main controller I'm fetching some data from the server to see which roles are assigned to current user.
The problem is that the method used to decide if an element should be shown or hidden is running an async call to the server to see the roles.
<div class="menu">
<a ng-show="$root.hasRole(['admin', 'tech'])" ng-cloak>
<i class="grid layout icon"></i> Users
</a>
....
</div>
And the function hasRole:
controller('MainCtrl', [
'$scope',
'$rootScope',
'WhoAmI',
function($scope, $rootScope, WhoAmI) {
$rootScope.whoAmI = false;
$scope.init = function() {
WhoAmI.whoAmI(function(err, res) {
$rootScope.whoAmI = res.user;
});
};
$rootScope.hasRole = function(roles) {
if(!$rootScope.whoAmI){
return false;
}
_.forEach($rootScope.whoAmI.roles, function(v, k) {
if (v.name in roles) {
return true;
}
});
return false;
}
}
])
As you would expect the elements render before the call return of that init function and they remain hidden. I attached that method hasRole to the $rootScope because I want it available through out the application.
Is there a way to pause the rendering until that $rootScope.whoAmI is not false any more or is there a better way of handling this?

Answer 1

The problem is with the inner return true statement. It does return true, but from the inner function; the hasRole() function still returns false. So write it as:
$rootScope.hasRole = function(roles) {
var result = false;
if(!$rootScope.whoAmI){
return false;
}
_.forEach($rootScope.whoAmI.roles, function(v, k) {
if (v.name in roles) {
result = true;
return false; // we have the result, stop iterating
}
});
return result;
};

Answer 2

This is wrong way:
ng-show="$root.hasRole(['admin', 'tech'])"
You need to change it to: ng-show="hasRole(['admin', 'tech'])"
<div class="menu">
<a ng-show="hasRole(['admin', 'tech'])" ng-cloak>
<i class="grid layout icon"></i> Users
</a>
....
</div>