title: Synchronizing multiple views in Angular
body: <p>For the past few days we have been writing a new angular.js based front-end for our REST-service. So far things are moving along nicely and we have built lots of small pages and components.</p>
  
  <p>We are now starting to integrate these things into a complete application and are wondering how to handle the main view based on two different menu's.</p>
  
  <p>We would like to have all these three components change based on some global state. Ideally controlled by the <code>$routeProvider</code> based on the url.</p>
  
  <p>We can think of several ways to do this. However none of them seem right and we have found no clear documentation on how the developers of angular envisioned this being done.</p>
  
  <p>Some reduced snippets:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html data-ng-app="myapp"&gt;
  &lt;head&gt;
      ....snip...
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="system-menu" data-ng-controller="MenuCtrl" data-ng-include="'partials/menu/system.html'"&gt;&lt;/div&gt;
      &lt;div id="main"&gt;
          &lt;div id="main-menu" data-ng-controller="MenuCtrl" data-ng-include="'partials/menu/main.html'"&gt;&lt;/div&gt;
          &lt;div id="content" data-ng-view&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>var myapp = angular.module('myapp', ['ngResource', 'ui']).
      config(['$routeProvider', function($routeProvider) {
          $routeProvider.
              when('/messages', {
                  templateUrl: 'partials/messages.html',
                  controller: MessagesCtrl
              }).
              when('/messages/:messageId', {
                  templateUrl: 'partials/messages.html',
                  controller: MessagesCtrl
              }).
              ...snip...
              otherwise({
                  redirectTo: '/messages'
          });
      }]);
  </code></pre>
  
  <p>When the user clicks a link to /messages/1 i want the controller messagesCtrl to be used for the view. This is easy and works as posted above. However my MenuCtrl does not "notice" this happening, and <strong>manually broadcasting</strong> a message to let it know of the page change so it can show the sub-menu seems ugly to me. Because the only reason for this message would be to update the menu causing some unwanted knowledge of the other controller.</p>
  
  <p>So far we like the documentation on angular.js but it seems to be lacking in the big-picture department.</p>
  
  <p>Can anyone provide us with a link or some pointers on the idiomatic way to do this?</p>