title: Two views in one AngularUI Router state sharing scope
body: <p>I am pretty new to the AngularUI Router and would like the use it for the following scenario:</p>
  
  <p>The layout <strong>common to all pages</strong> includes a top navbar containing a menu with buttons on the right and a content section filling the space below. The page has several pages that I map to UI Router states (page1, page2, ...). Each page can have its own menu items and its own content. The <strong>menu needs to share the scope with the content</strong> since they interact (e.g. the save button submits the form in the content, it should only be enabled if the form is valid).</p>
  
  <p><img src="https://i.stack.imgur.com/uZi6p.png" alt="mockup"></p>
  
  <p>The HTML roughly looks like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;nav class="..."&gt;
          &lt;h1&gt;my site&lt;/h1&gt;
          &lt;div&gt;MENU SHOULD GO HERE&lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="row"&gt;
          &lt;div class="column ..."&gt;
              CONTENT SHOULD GO HERE
          &lt;/div&gt;
      &lt;/div&gt;        
  &lt;/body&gt;
  </code></pre>
  
  <p>Right now, I am using two parallel views and two controllers for each state. But this way, the two scopes/controllers cannot interact.</p>
  
  <p>So how would you accomplish that?</p>