html5 - Hiding menu element by permission using AngularJS and Web API -

i have implemented roles based authorization in web api restfull service using owin.

what best way hide menu items or buttons based on role user has? want hide items user has no access to.

updated

i want know best practice controller.

this example of want, don't think right way it. second, routing fails because cannot distinguish between 2 actions.

[authorize(roles = "somerole")] public class foocontroller : apicontroller {     [httpget]     public string helloworld()     {          return "hello world - authorized";     }      [httpget]     [route("hasaccess")]     [allowanonymous]     public bool hasaccess()     {          return user.isinrole("somerole");     } } 

http://localhost:8080/api/foo/ --> calls helloworld()

http://localhost:8080/api/foo/hasaccess --> calls hasaccess()

you use ng-if directive. render div if hasrole function returns true.

<div ng-if="hasrole('admin')">                    admin menu item </div> 

and in controller have function

$scope.hasrole = function(role){     //check if user has needed role     //return true or false }