has-authority not working on a button - angularjs

Question

So I used JHipster to generate my app.
I could see the navbar using the has-authority directive to show/hide menus.
Now what I would to do is to use the directive on a button to show it only to users with ROLE_ADMIN
here's the code of the directive
.directive('hasAuthority', ['Principal', function (Principal) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var setVisible = function () {
element.removeClass('hidden');
},
setHidden = function () {
element.addClass('hidden');
},
defineVisibility = function (reset) {
if (reset) {
setVisible();
}
Principal.hasAuthority(authority)
.then(function (result) {
if (result) {
setVisible();
} else {
setHidden();
}
});
},
authority = attrs.hasAuthority.replace(/\s+/g, '');
if (authority.length > 0) {
defineVisibility(true);
scope.$watch(function(scope) {
return Principal.isAuthenticated();
}, function(newValue) {
defineVisibility(true);
});
}
}
};
}]);
here's where it's working
<li ng-class="{active: $state.includes('admin')}" ng-switch-when="true" has-authority="ROLE_ADMIN" class="dropdown pointer">
and here is where I want it to work
<table class="jh-table table table-striped">
<thead>
...
</thead>
<tbody>
<tr
ng-repeat="offeredService in travelRequest.offeredServices track by offeredService.id">
<td><a
ui-sref="offeredServiceType.detail({id:offeredService.offeredServiceType.id})">{{offeredService.offeredServiceType.name}}</a>
</td>
<td>{{offeredService.sellingPrice}}
{{offeredService.currency.symbol}}</td>
<td>{{offeredService.cost}}
{{offeredService.currency.symbol}}</td>
<td>{{offeredService.confirmationDate | date:'medium'}}</td>
<td><a
ui-sref="serviceProvider.detail({id:offeredService.serviceProvider.id})">{{offeredService.serviceProvider.name}}</a>
</td>
<td class="text-right">
<div class="btn-group flex-btn-group-container">
<button type="submit"
ui-sref="offeredService.detail({id:offeredService.id})"
class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-eye-open"></span> <span
class="hidden-xs hidden-sm" translate="entity.action.view"></span>
</button>
<button type="submit"
ui-sref="offeredService.edit({id:offeredService.id})"
class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil"></span> <span
class="hidden-xs hidden-sm" translate="entity.action.edit"></span>
</button>
<button has-authority="ROLE_USER" type="submit"
ui-sref="offeredService.delete({id:offeredService.id})"
class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove-circle"></span> <span
class="hidden-xs hidden-sm" translate="entity.action.delete"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>

Answer 1

It seems to me that your condition is wrong:
<button has-authority="ROLE_USER" type="submit"
ui-sref="offeredService.delete({id:offeredService.id})"
class="btn btn-danger btn-sm">
An admin user has both authorities ROLE_USER and ROLE_ADMIN.
So in your case the button will always show.
Shouldn't it be like below?
<button has-authority="ROLE_ADMIN" type="submit"