Angular access/change nested ng-controller variable? - angularjs

Question

I have a partial view which is included on multiple pages. That Partial view has it's on NgController.
Is there a way I can access a scope variable of that specific nested controller when I'm inside of another?
For example:
<div ng-controller="fooController">
<a ng-click="changeScopeVariableOfBarController()">Click!</a>
<div ng-controller="barController">
{{ thisHasToChangePlease }}
</div>
</div>
Is that possible? I couldn't figure out how. I include the partial view with php's include, so I don't work with templates.

Answer 1

If you have a reusable "component" (template + functionality) you could refactor that into a directive instead of template + controller. Then, using an isolated scope with parameters you could have the outside world change the inside of the directive that way.
http://plnkr.co/edit/6JYVucuizmPkyt2CLQtr?p=preview
index.html
<div ng-controller="fooController">
<div>variable: {{ variable }}</div>
<button ng-click="changeScopeVariableOfBarController()">Click to increment variable on both scopes!</button>
<bar this-has-to-change-please="variable"></bar>
</div>
bar.html
<div>
thisHasToChangePlease: {{ thisHasToChangePlease }}
</div>
app.js
app.controller('fooController', function($scope) {
$scope.variable = 1;
$scope.changeScopeVariableOfBarController = function () {
$scope.variable++;
};
});
app.controller('barController', function ($scope) {
});
app.directive('bar', function () {
return {
restrict: 'E',
scope: {
thisHasToChangePlease: '='
},
controller: 'barController',
templateUrl: 'bar.html'
}
});