Angular ng-show variable getting out of scope

Question

I am trying to build a visual login/logout functionality this way:

1st time when opening the page, the Login link is visible and available, Logout is not. When I do submit Login dissapears and Logout is visible. I tried this with ng-show from angular. The spa page has the common menu:

<ul class="nav navbar-nav">
    <li><a href="/public/Register">Register</a></li>
    <li ng-show="loginlogout"><a href="/public/Login">Login</a></li><!--should be true but it is FALSE-->
    <li ng-show="!loginlogout"><a href="/private/Logout">Logout</a></li>
    <li><a href="/private/UserPage">User</a></li>
</ul>

For setting the loginlogout variable I did it like this:

BetAppModule.controller('HomeController', function ($scope) {

    $scope.loginlogout = true;

});

Although, when I debug in Chrome, loginlogout is set correctly to true, the desired functionality it is not accomplished. Why is loginlogout getting out of scope and it does not stay true as it's set in controller. I also tried using a service. I get the same result.

It works if I use $rootscope, but I hear that this is not recommended. Besides, at some point, I get confused with $rootscope;

Anyhow I would be grateful getting some help. Thank you.

Answer 1

That should be a scope issue, I guess you are missing ng-controller="HomeController" on your html (view).