title: Angular 1.5 component updating parent controller through ngRoute
body: <p>I'm using ngRoute to create an Angular single-page app. Want to move to a component-based version. </p>
  
  <p>Problem is isolated scopes. I need access to main controller props and methods. Trying to use bindings but does not work. I cannot find the problem with this one. This app works fine without using components. When I try to change the homepage view into a component it crashes. These are the main parts of the code:</p>
  
  <p><strong><em>framework</em></strong></p>
  
  <pre><code>&lt;html ng-app="angularModule" &gt;
  &lt;body ng-controller="angularController as angCtrl" &gt;
      &lt;div ng-show="angCtrl.user.isLoggedIn" &gt;Sign Out&lt;/div&gt;
      &lt;div ng-hide="angCtrl.user.isLoggedIn" cd-visible="angCtrl.showSignIn"&gt;Sign In&lt;/div&gt;
      &lt;div id="contentLayer" class="contentLayer" ng-view &gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong><em>homepage template</em></strong></p>
  
  <pre><code>&lt;h1 class="pageLabel" &gt;HomePage&lt;/h1&gt;
  &lt;blockquote&gt;This can be anything. No bindings.&lt;/blockquote&gt;
  </code></pre>
  
  <p><strong><em>angularController</em></strong></p>
  
  <pre><code>var app = angular.module ('angularModule', ['ngRoute'] );
  
  app.directive ('cdVisible', 
      function () {
          return  function (scope, element, attr) {
                      scope.$watch (attr.cdVisible, 
                          function (visible) {
                              element.css ('visibility', visible ? 'visible' : 'hidden');
                          }
                      );
                  };
      }
  );
  
  app.config ( [ '$locationProvider', '$routeProvider',
      function config ($locationProvider, $routeProvider) {
          $locationProvider.hashPrefix ('!');
          $routeProvider
          .when ('/sign-in', {
              templateUrl:    '/ng-sign-in',
              controller:     signInController
          })
          ... more routes
          .when ('/home', {
              template:   '&lt;home-page showSignIn="angCtrl.showSignIn" menuSelect="angCtrl.menuSelect" &gt;&lt;/home-page&gt;'
          })
          .otherwise ('/home');
      }
  ]);
  
  function homePageController () {
      this.menuSelect ('Devices');  // this statement has no effect on angularController.menuSelection chrome shows it as an anonymous function
      this.showSignIn = false;  // this bombs: Expression 'undefined' in attribute 'showSignIn' used with directive 'homepage' is non-assignable!
  }
  
  app.component ('homePage', {
      templateUrl:    '/ng-homepage',
      controller:     homePageController,
      bindings: {
          menuSelect: '&amp;',
          showSignIn: '='
      }
  });
  
  app.controller ('angularController', [ '$http', '$window', '$location',
      function ($http, $window, $location) {
          var self = this; 
          this.user = {
              "isLoggedIn":       false
          };
          this.showSignIn = true;
          this.menuSelection = "";
          this.errorMessage = "";
          this.menuSelect = 
              function (selection) {
                  self.menuSelection = selection;
              };
          this.setUserData =
              function (userData) {
                  self.user = userData;
              };
          this.setShowSignIn =
              function (show) {
                  self.showSignIn = show;
              };
          this.menuSelect ('');
          this.getUserData();     // I removed this for this post
      }
  ]);
  </code></pre>
  
  <p>I added a comment to the spot where it throws an exception. The homepage controller attempts to update the model of the angularController. The first does nothing the second throws an exception. What am I doing wrong? </p>