angular.module(...)
.service('RolesSerivce', function() {
    this.hasRole = function(roleName) {
         return this.roles.indexOf(roleName)>1;
    };
    this.setRoles = function(rolesArr) {
        this.roles = rolesArr;
    };
    this.setRoles(['ROLE_CAN_CLICK'])
}).direcive('hasRole', function() {
    ??????????????????
    // use RolesSerivce.hasRole inside implemetation
    ??????????????????
});

<button has-role="ROLE_CAN_CLICK" ng-disabled="extraValidation > 0">Click me</button>

angular.module(...)
.service('RolesService', function() {
    this.hasRole = function(roleName) {
         return this.roles.indexOf(roleName)>1;
    };
    this.setRoles = function(rolesArr) {
        this.roles = rolesArr;
    };
    this.setRoles(['ROLE_CAN_CLICK'])
}).directive('hasRole', function(RolesService) {
    return {
    link: function (scope, element, attrs) {
        $(element).removeAttr('ng-disabled');
        if(RoleService.hasRole(attrs.hasRole)) {
            $(element).removeAttr('disabled');
        } else {
            $(element).attr('disabled', 'disabled');
        }
    }
    };
});

(extraValidation > 0)==true  (extraValidation > 0)==false

ROLE_CAN_CLICK==true        DISABLED                     ENABLED

ROLE_CAN_CLICK==false       DISABLED                     DISABLED

<button ng-disabled="(!ROLE_CAN_CLICK) || (extraValidation > 0)">
     Click me
</button>