I am trying to save a variable within $rootScope. When I have the following structure, everything works fine and the second div displays the value:
<html ng-app>
...
<body>
<button ng-click="$rootScope.pr = !$rootScope.pr"></button>
<div ng-class="{some:$rootScope.pr}">{{$rootScope.pr}}</div>
</body>
However, when my structure looks like this:
<body>
<div class="root-scope-value-1">{{$rootScope.mobileMenuCollapsed}}</div>
<div class="content-wrapper" ng-controller="MainController">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="root-scope-value-2">{{$rootScope.mobileMenuCollapsed}}</div>
<button ng-click="$rootScope.mobileMenuCollapsed = !$rootScope.mobileMenuCollapsed">
The div with class root-scope-value-2 correctly shows the value from $rootScope.mobileMenuCollapsed, but the div with class root-scope-value-1 higher up in the DOM does not. Why is that?