Ich bin neu bei AngularJS und versuche, mich mit der Benutzerauthentifizierung zu befassen.

Ich stelle sicher, dass nicht verbundene Benutzer nicht auf eingeschränkte Routen zugreifen können:

app.js

  .config(function ($routeProvider) {
    $routeProvider
        .when('/myroute', {
          templateUrl: 'views/myroute.html',
          controller: 'MyrouteCtrl',
            access: {
                isFreeAccess: false
            }
        })
 ...
 .run( function ($rootScope, $location, Auth) {

    $rootScope.$on('$routeChangeStart', function(currRoute, prevRoute){

        if (prevRoute.access != undefined) {
            // if route requires auth and user is not logged in
            if (!prevRoute.access.isFreeAccess && !Auth.isLogged) {
                // redirects to index
                $location.path('/');
            }
        }

AuthService.js

.factory('Auth', function () {
    var user;

    return{
        setUser : function(aUser){
            user = aUser;
        },
        isLoggedIn : function(){
            return(user)? user : false;
        }
    }
});

login.js

$scope.login = function(user) {

    $http({
        url: ***,
        method: "POST",
        data: user,
        headers: {'Content-Type': 'application/json'}
    }).success(function (data, status, headers, config) {
            $scope.persons = data;

            Auth.setUser(data); //Update the state of the user in the app

            $location.path("/");
    }).error(function (data, status, headers, config) {
        $scope.status = status;
    });

Der Benutzerstatus wird gespeichert, wenn er verbunden ist. Jetzt möchte ich neue Elemente in der Navigationsleiste anzeigen.

index.html

<div ng-include src="'views/navbar.html'"></div>

navbar.js

.controller('NavbarCtrl', function ($scope) {
    $scope.items = [
        {'name': 'Home', "needAuthentication": false},
        {'name': 'About', "needAuthentication": false},
        {'name': 'Settings', "needAuthentication": true},
        {'name': 'Logout', "needAuthentication": true}
    ];
});

navbar.html

<div ng-controller="NavbarCtrl" class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
        <ul class="nav navbar-nav navbar-right">
            <li ng-repeat="item in items ">
               <a ng-if="item.needAuthentication == false || (item.needAuthentication == true && Auth.isLoggedIn())" href="#{{item.name}}">{{item.name}}</a> 
            </li>
        </ul>
    </div>

Wenn der Benutzer die App startet:

1) Er ist noch nicht verbunden

ng-if="item.needAuthentication == false || (item.needAuthentication == true && Auth.isLoggedIn ())"

Die Elemente 'Home' und 'About' werden angezeigt.

2) Dann verbindet er sich mit der App, aber die Navigationsleiste wird nicht mit anderen Elementen ('Einstellungen' und 'Abmelden') neu gerendert.

Was ist der richtige Weg, um das zu erreichen? Eine Direktive verwenden / an ein Modell binden / oder etwas anderes?

Danke im Voraus