title: Accessing inherited scope with Controller As approach
body: <p><strong>With the original way to define controllers</strong>, accessing the parent's scope was fairly trivial, since the child scope prototypically inherits from its parent.</p>
  
  <pre><code>app.controller("parentCtrl", function($scope){
     $scope.name = "Parent";
  })
  .controller("childCtrl", function($scope){
     $scope.childName = "child of " + $scope.name;
  });
  
  &lt;div ng-controller="parentCtrl"&gt;
     {{name}}
     &lt;div ng-controller="childCtrl"&gt;
        {{childName}}
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The Controller-As approach</strong> seems to be the <a href="https://github.com/johnpapa/angularjs-styleguide#controlleras-view-syntax">recommended</a> way to declare a controller. But with Controller-As, the above approach no longer works.</p>
  
  <p>Sure, I can access the parent scope with <code>pc.name</code> from the View:</p>
  
  <pre><code>&lt;div ng-controller="parentCtrl as pc"&gt;
     {{pc.name}}
     &lt;div ng-controller="childCtrl as cc"&gt;
        {{cc.childName}}
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I do have some issues with this (potential for spaghetti code), but this question is about accessing the parent scope from the child controller.</p>
  
  <p>The only way I can see this working is:</p>
  
  <pre><code>app.controller("parentCtrl", function(){
     this.name = "parent";
  })
  .controller("childCtrl", function($scope){
     $scope.pc.name = "child of " + $scope.name;
     // or
     $scope.$parent.pc.name = "child of " + $scope.name;
  
     // there's no $scope.name
     // and no $scope.$parent.name
  });
  </code></pre>
  
  <p>So now, the child controller needs to know about "<code>pc</code>" - except, this should (in my mind) be restricted to the view. I don't think a child controller should know about the fact that a view decided to declare a <code>ng-controller="parentCtrl as pc"</code>.</p>
  
  <p><strong>Q:</strong> What's the right approach then?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Clarification: I'm not looking to inherit a parent controller. I am looking to inherit/change the shared scope. So, if I was to amend the first example, I should be able to do the following:</p>
  
  <pre><code>app.controller("parentCtrl", function($scope){
     $scope.someObj = {prop: "not set"};
  })
  .controller("childCtrl", function($scope){
     $scope.someObj.prop = "changed";
  });
  </code></pre>