title: How to inherit from base controller using "controller as" syntax?
body: <p>Here is a snippet demonstrating how to inherit from a base controller using <code>$controller</code> and <code>$scope</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', []);
  
  app.controller('MainCtrl', function($scope, $controller) {
    $controller('BaseCtrl', {
      $scope: $scope
    })
  });
  
  app.controller('BaseCtrl', function($scope) {
    $scope.name = 'World';
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;AngularJS&lt;/title&gt;
    &lt;script&gt;
      document.write('&lt;base href="' + document.location + '" /&gt;');
    &lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="MainCtrl"&gt;
    &lt;p&gt;Hello {{name}}!&lt;/p&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I do the same using "controller as" syntax? This snippet demonstrates what I am after, but it doesn't work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', []);
  
  app.controller('MainCtrl', function($scope, $controller) {
    $controller('BaseCtrl', {
      $scope: $scope
    })
  });
  
  app.controller('BaseCtrl', function() {
    this.name = 'World';
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;AngularJS&lt;/title&gt;
    &lt;script&gt;
      document.write('&lt;base href="' + document.location + '" /&gt;');
    &lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="MainCtrl as main"&gt;
    &lt;p&gt;Hello {{main.name}}!&lt;/p&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>