title: Angularjs: two views, same controller - shared scope
body: <p>How do I use routing to load/update multiple views/templates? According to my reading, it is not possible to load multiple partials at the same time with angular routing. So how do you manage this? If the application is a bit more complex then a blog then you'd want to change few places at the same time when the route changes.</p>
  
  <p>This is the html sample:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
    &lt;body ng-app='Basal' ng-controller="MainCtrl"&gt;
      &lt;header&gt;
        &lt;div&gt;
          &lt;nav id='main-menu'&gt;
            &lt;ul&gt;
              &lt;li ng-click="menuItem('tables')"&gt; Tables &lt;/li&gt;
            .....
          &lt;/nav&gt;
        &lt;/div&gt;
        &lt;div id='context-menu' ng-include="contextMenu"&gt; &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;main ng-view&gt;&lt;/main&gt;
  
    &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>So I need to load the main app via <code>ng-view</code> and submenu for this app via <code>ng-include</code> in the header.
  Not sure if this is the right way to do this but it works and allows me to load many templates at the same time.
  I'd use a function from the main menu that loads the app like <code>&lt;li ng-click="menuItem('tables')"&gt; Tables &lt;/li&gt;</code> and then pass it through the <code>switch</code> in the main controller. Like this:</p>
  
  <pre><code>  $scope.contextMenu = '';
    $scope.menuItem = function (i) {
        switch (i) {
            case 'tables':
                $location.path('/tables');
                $scope.contextMenu = '/views/tables/tables-menu.html';
                break;
            default:
                .....
        }
    }
  </code></pre>
  
  <p>Please, let me know if this is acceptable way to do it as this might be the cause of my problem.</p>
  
  <p>Now, both templates are set to be under the same controller. The controller for <code>ng-view</code> template is set in the <code>when</code> function of <code>$routeProvider</code> and the controller for the <code>ng-include</code> template is set with <code>ng-controller</code> like so:</p>
  
  <pre><code>&lt;div class='app-ctrl' id='tables-ctrl' ng-controller="TablesCtrl"&gt;
  
    &lt;nav class='app-menu'&gt;
      &lt;ul&gt;
        &lt;li ng-click="newTable()"&gt; Create &lt;/li&gt;
        &lt;li ng-click="editTable()"&gt; Edit &lt;/li&gt;
        &lt;li ng-click="delTable()"&gt; Delete &lt;/li&gt;
        &lt;li ng-click="testTable()"&gt; Test &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
    &lt;div&gt;&lt;button class='search'&gt;Search&lt;/button&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This template just loads the control buttons for the app.
  Both views have the same controller - <code>TablesCtrl</code></p>
  
  <p>In the <code>TablesCtrl</code> controller I process the button clicks.
  For instance</p>
  
  <pre><code>$scope.testTable = function() {  
      $scope.test = "blah";    
  }
  </code></pre>
  
  <p>The <code>$scope.test</code> is only visible from the top template where I set the <code>ng-click</code> directives. Why? If both templates are governed by the same controller why do I see the set variable in one template but not in the other?
  How can I make buttons in one template process the scope in the other. I thought that putting two views under the same controller would do it but it obveously does not. I understand from the docs that two views get separate scope but I thought that the same controller would make it accessible.</p>
  
  <p>What is the best way to do it if I want to load the buttons in one template but the data they effect and process in the other template?</p>
  
  <p>Sorry if it is not clear but I was struggling how to explain my confusion. I am new to both Angular and JavaScript.</p>
  
  <p>Thanks.</p>