Value undefined in angular custom directive - angularjs

Question

I tried to make a directive for destroying DOM elements if user doesn't have the permission to see it. I do this as follows:
angular
.module('digital_equation.auth')
.controller('AuthLoginController', AuthLoginController)
.directive('ngPermission', ngPermissionDirective);
function ngPermissionDirective() {
return {
multiElement: true,
scope: {
ngPermission: '#'
},
restrict: 'A',
link: function (scope, element, attributes) {
scope.$watch('ngPermission', function (value) {
console.log(value);
//Access rootScope to get the current user permissions
var permissions = scope.$root.globals.currentUser.role.settings.permissions;
//Loop through permissions object to check if any permission is the same as the value sent to directive
var keepGoing = true;
angular.forEach(permissions, function (permission, key) {
if (keepGoing == true)
{
if (key == value) {
element.show();
keepGoing = false;
}
else {
element.hide();
}
}
});
})
}
};
}
HTML:
<div class="col-xs-12 col-md-9" ng-permission="manage_appointments"></div>
In this situations for example if the current user taken from rootScope doesn't have the permission "manage_appointments" among it's permission this div should be destroyed. As you can see I only know how to hide it but this is not enough I need it to be destroyed so on page inspect this div doesn't show up.
My second problem is that console.log(value); returns undefined not matter what I tried.
And I also need an advice upon accessing rootScope. If I pass the rootScope as parameter here it works but I cannot pass the scope as well.. so how can I do this.
link: function(rootScope, element, attributes )
Please keep in mind that even though I declare my directive in the authController I need it to be available in my entire project.
Sorry for the description but it is my first custom directive in AngularJs and I tried a lot of options.
Thank you all for your time and help!
Edit:
scope.$watch('ngPermission', function (value)
This solved my problem with value being undefined but when I try to use the directive on two different elements (one to be hidden and one to be shown) it will do whatever the last use of my directive is applied (show both in this case). Any ideas why this happens?
Solution:
function ngPermissionDirective() {
return {
multiElement: true,
priority: 900,
scope: {
ngPermission: '#'
},
restrict: 'A',
link: function (scope, element, attributes) {
scope.$watch('ngPermission', function (value) {
console.log(value);
//Access rootScope to get the current user permissions
var permissions = scope.$root.globals.currentUser.role.settings.permissions;
//Loop through permissions object to check if any permission is the same as the value sent to directive
var keepGoing = true;
angular.forEach(permissions, function (permission, key) {
if (keepGoing == true)
{
if (key == value) {
element.show();
keepGoing = false;
}
else {
element.remove();
}
}
});
})
}
};
}

Answer 1

Try changing scope.$watch(attributes.ngPermission, ... to scope.$watch('ngPermission', ....
An alternative approach might be $observe - attributes.$observe('ngPermission', ...