Angular two different include inside controller have different $scope - angularjs

Question

<!-- index.html -->
<div ng-controller="navbarController">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div ng-include src="'./html/bars.html'"></div>
<div ng-include src="'./html/extendBars.html'"></div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
This is my cool bottom bar :)
</div>
</nav>
</div>
<!-- ./html/bars.html -->
<a class="navbar-brand" ui-sref="Welcome">Brand</a>
<ul class="nav navbar-nav">
<li ng-class="{ active: TopMenu=='OurWork'}" ng-click="TopMenu='OurWork'"><a ui-sref="OurWork">Our Work</a>
</li>
</ul>
<!-- ./html/extendBars.html -->
<ul class="nav navbar-nav">
<li ng-class="{ active: TopMenu=='ProjectManager'}" ng-click="TopMenu='ProjectManager'"><a ui-sref="ProjectManager">Projects Manager</a>
</li>
<li ng-class="{ active: TopMenu=='Publish'}" ng-click="TopMenu='Publish'"><a ui-sref="Publish">Publish</a>
</li>
<li>Logout
</li>
</ul>
The problem is that this two files that contain two part of navbar have different $scope, when i change value of TopMenu it changes only on one of two files. In my js controller code when i define $scope.TopMenu is defines correct on both files. Why this is happening?

Answer 1

ng-include creates a child scope. since you're using two ng-includes, a new child scope is created for each, both prototypically inheriting from the parent scope (the navbarController).
by prototypical inheritance, any objects on the parent will be seen in the child scopes (as long as a blocking object hasn't been created on the child). however, setting a value on the child scope won't be seen on the other child, as it's not part of it's inheritance chain (it only climbs directly up).
from the child scopes, you could access $rootScope instead of $scope in order to access the values above. alternately, you could encapsulate the data you're wanting to share between the scopes in a Service (in most cases, this is the preferred method to keep things clean).
EDIT to include function based approach based on question in comments:
instead of trying to directly set and access values on the parent scope, a quick alternative would be to create functions in your navbarController to handle this. a service is potentially cleaner, especially if you're using this from other areas in the app, but something like this should work (I didn't create a plnkr to test, and i obviously don't know what's in your existing navbarController -- so this is just a concept).
in your controller file:
.controller('navbarController', function($scope) {
var currentMenu = 'defaultMenuName';
$scope.setMenu = function(newMenu) {
currentMenu = newMenu;
};
$scope.isMenu = function(testMenu) {
return currentMenu == testMenu;
};
}
in your html:
<li ng-class="{ active: isMenu('OurWork')}" ng-click="setMenu('OurWork')"><a ui-sref="OurWork">Our Work</a>
Example of this approach in action:
http://plnkr.co/edit/eQKbjjRVdSqDjLlpLPCB?p=preview