AngularJS - Change navigation menu based on user logged - angularjs

Question

I am using SpringBoot and Angular JS for my web application and I would like to know a good way to change the navigation menu based on the user logged.
I was placing the navigation bar inside all the views but im sure there is a better way to do it.
User.class
#Entity
public class Usuario implements Serializable {
#Enumerated(EnumType.STRING)
private Rol rol; -> This can be "UserA","UserB","UserC"
}
And my different navigation menus are
Navigation for UserA
<nav id="nav">
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
</nav>
Navigation for UserB
<nav id="nav">
<ul>
<li>B1</li>
<li>B2</li>
<li>B3</li>
</ul>
</nav>
Navigation for UserC
<nav id="nav">
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
</nav>
Thanks!

Answer 1

You can use ng-show, ng-if or ng-switch. Beter use ng-if or ng-switch as it doesn't create html for other roles and other users wont be able to see links for other roles if they do inspect element. ng-show will just hide only(adds the display:none style)
In controller get the role
JS
$scope.role = $http.get("some url to get role");
HTML
<nav id="nav" ng-switch='role'>
<ul ng-switch-when='userA'>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
<ul ng-switch-when='userB'>
<li>B1</li>
<li>B2</li>
<li>B3</li>
</ul>
<ul ng-switch-when='userC'>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
<ul ng-switch-default='userDefault'>
<li>Default1</li>
<li>Default2</li>
<li>Default3</li>
</ul>
</nav>
Default is optional

Answer 2

For all nav add ng-show and control your rol. And you have set your rol to $scope.role
<nav id="nav" ng-show="role=='userA'">
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
</nav>
If you don't want to use ajax call;You can set $scope.role value on your jsp and when user changed result will be changed. You can use "JSTL" or "Jsp shortTag" shortTag example;
<nav id="nav" ng-show="<%=rol%>=='userC'">
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
</nav>