AngularJS: Two elements share the same Controller - how to force updating another element's view?

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}}?

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.