javascriptangularjsrootscope

Not reflect my changes in `$rootScope` in angularjs

I'm having trouble trying to reflect my changes in $rootScope. As I understand (please note that I'm very new to angular), $rootScope is visible across controllers. What I'm trying to do is to update a value in $rootScope and trying to read that value in my html page.

The problem is even though the changes are applied to $rootScope its not reflecting in my view. Following is the code

I have a div which I want to show/hide depending on the value

#view
<div ng-hide="{{logged}}">
  // this should visible only if the logged is true
</div>  



#controller1 I set the rootscope to false
$rootScope.logged = false; // this makes the view hidden


#controller2 I set the rootScope to true
$rootScope.logged = true; 
$rootScope.$apply();

But making the $rootScope.logged = true doesn't make the view visible. My questions are

1 - What I might be going wrong?

2 - What is the most Angular way of doing such a thing?

Solution

  • No need to use {{ in your html template.

    #view
<div ng-hide="logged">
  // this should visible only if the logged is true
</div>

    This is enough.