AngularJS - Change navigation menu based on user logged -

i using springboot , angular js web application , know way change navigation menu based on user logged.

i placing navigation bar inside views im sure there better way it.

user.class

@entity public class usuario implements serializable { @enumerated(enumtype.string) private rol rol; -> can "usera","userb","userc" } 

and different navigation menus are

navigation usera

<nav id="nav">         <ul>             <li><a href="#/usera1">a1</a></li>             <li><a href="#/usera2">a2</a></li>             <li><a href="#/usera3">a3</a></li>         </ul> </nav> 

navigation userb

<nav id="nav">         <ul>             <li><a href="#/userb1">b1</a></li>             <li><a href="#/userb2">b2</a></li>             <li><a href="#/userb3">b3</a></li>         </ul> </nav> 

navigation userc

<nav id="nav">         <ul>             <li><a href="#/userc1">c1</a></li>             <li><a href="#/userc2">c2</a></li>             <li><a href="#/userc3">c3</a></li>         </ul> </nav> 

thanks!

you can use ng-show, ng-if or ng-switch. beter use ng-if or ng-switch doesn't create html other roles , other users wont able see links other roles if inspect element. ng-show hide only(adds display:none style)

in controller role

js

$scope.role = $http.get("some url role"); 

html

<nav id="nav" ng-switch='role'>     <ul ng-switch-when='usera'>         <li><a href="#/usera1">a1</a></li>         <li><a href="#/usera2">a2</a></li>         <li><a href="#/usera3">a3</a></li>     </ul>      <ul ng-switch-when='userb'>         <li><a href="#/userb1">b1</a></li>         <li><a href="#/userb2">b2</a></li>         <li><a href="#/userb3">b3</a></li>     </ul>      <ul ng-switch-when='userc'>         <li><a href="#/userc1">c1</a></li>         <li><a href="#/userc2">c2</a></li>         <li><a href="#/userc3">c3</a></li>     </ul>      <ul ng-switch-default='userdefault'>         <li><a href="#/userdefualt1">default1</a></li>         <li><a href="#/userdefault2">default2</a></li>         <li><a href="#/userdefault3">default3</a></li>     </ul> </nav> 

default optional