title: Child controller not inheriting from parent controller
body: <p>I've been having a lot of trouble with understanding scope inheritance and I've tried my best to pass data objects from a parent controller into the child controller, but I can't seem to get things to work. Can someone explain why this isn't functioning? Thank you!</p>
  
  <p><strong>EDIT</strong>: I didn't specify this earlier, but it's a project requirement to use the John Papa style guide, so I can't solve this problem by using <code>$scope</code> in either of the controllers.</p>
  
  <p><strong>UPDATE</strong>: It seems I misunderstood the purpose of using <code>this</code>... based on help from posters below, I now understand that certain actions require the use of <code>$scope</code> and John Papa's style guide simply asks developers to use <code>this</code> when appropriate to avoid scope conflicts, not as a <em>replacement</em> for scope</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>//parent.controller.js
  (function () {
      'use strict';
  
      angular
          .module('app')
          .controller('ParentController', ParentController);
  
      ParentController.$inject = ['$scope'];
  
      function ParentController($scope) {
          var vm = this;
          console.log(this);
          vm.test = {};
          vm.test.label = "This is being set in the parent controller.";
      }
  })();
  
  //child.controller.js
  (function () {
      'use strict';
  
      angular
          .module('app')
          .controller('ChildController', ChildController);
  
      ChildController.$inject = ['$scope'];
  
      function ChildController($scope) {
          var vm = this;
          vm.test = vm.test;
      }
  })();
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-controller="ParentController as vm"&gt;
       &lt;div&gt;PARENT: {{vm.test.label}}&lt;/div&gt;
       &lt;div ng-controller="ChildController as vm"&gt;
            &lt;div&gt;CHILD: {{vm.test.label}}&lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>RESULT</strong></p>
  
  <pre><code>PARENT: 'This is being set in the parent controller.'
  CHILD:
  </code></pre>