AngularJs: ng-if reacting too late

Question

Im using ui.router and including my navigation like this in my main html file:

<header ng-if-start="logedin()"></header>
<navigation ng-if-end="logedin()"></navigation>

the logedin() boolean will be set through the angular.module().run() in this function:

$rootScope.$on('$stateChangeStart', function(e, to)

If i click logout in one of the navigation, the controller of the navigation will trigger this function:

$scope.logout = function() {
    store.remove('jwt');
    $state.go('login');
}

The Problems is after the $state.go the navigation is not hiding, but after refreshing the page.

Do i have to rerender the main index template/view (and then how)? Or how could I solve this problem?

Answer 1

So I solved it myself. Sorry for not providing the logedin() method.

The problem was:

$scope.logedin = function() {
return $rootScope.logedin
}

The $rootScope.logedin was set in the angular.module().run()-function.

To solve it i had to create a simple getter/setter service.

angular.module('sample')
    .service('sharedLogedIn', function () {
        var property = true;

        return {
            getProperty: function () {
                return property;
            },
            setProperty: function(value) {
                property = value;
            }
        };
    });

Answer 2

Good to know the issue was resolved. What might be happening is your values are not propagated... I might do this to troubleshoot:

<header ng-if="loggedinBool"></header>
<navigation ng-if="loggedinBool"></navigation>

1) Assign loggedin() value to a scope model or service property (preferably) loggedinBool and see if the values are propagated after logout which changes loggedinBool value.

2) If that does not work try $broadcast/$emit in loggout and capture that to change value of loggedinBool. This should automatically provide two-way-binding else try $scope.digest() or $scope.apply() method to see if values propagates.