Question

My index.html looks like this:

<div id="div1" ng-controller="StartMenu">
  <div id="button1" ng-click="doSomething()"></div>
  {{value}}
</div>
<div id="div2" ng-view></div>

Module configuration:

angular.module('app').config([$routeProvider, function($routeProvider) {
  $routeProvider.when('/start', {
    templateUrl: 'partials/start.html', controller: StartMenu
  });
}]);

start.html:

<div id="button2" ng-click="doSomething()"></div>
{{value}}

And controller function:

function StartMenu($scope, globals) {    // service globals defined elsewhere
  $scope.value = globals.value
  $scope.doSomething = function() {
    // Manipulate globals.value
    $scope.value = globals.value;
  }
}

The problem: These two div elements in index.html share a same controller function. When I click #button1 in #div1 doSomething is invoked and $scope.value is changed. The change is immediately rendered in #div1 and {{value}} changes but #div2 remains unchanged. How do I “force” #div2 to be rendered and to show the change in {{value}}?

Answer 1

ng-view creates its own (child) scope, so the {{value}} in start.html is created on the child scope. This value property hides/shadows the property of the same name in the parent scope. There are a few possible solutions:

1. use {{$parent.value}} in start.html
2. use an object instead of a primitive on the parent $scope — e.g., $scope.obj = {value: 2}. Then reference it in the child: {{obj.value}}. (Well, this won’t work for your particular scenario, since value in the parent scope already references something else.)
3. use a function in start.html: {{value()}} — define that function on the parent scope.

For more info about scope inheritance, see What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Update: I read the HTML too fast… div2 is not contained within div1. The issue is twofold:

1. two controllers are being created, each of which creates its own value property on its own scope
2. if globals.value is a primitive, then the controller scopes are getting copies of the values, not references.

Solutions 2 and 3 above apply here.

2 = Create an object on globals and reference a property of that object in the controller scopes (i.e., don’t use a primitive).

3 = use a function in the controllers to access the global primitive value. Fiddles for both solutions are in the comments below.