Дочерний контроллер не наследуется от родительского контроллера

У меня возникли проблемы с пониманием наследования областей, и я изо всех сил старался передавать объекты данных из родительского контроллера в дочерний контроллер, но я не могу заставить работать. Может кто-нибудь объяснить, почему это не работает? Спасибо!

EDIT: Я не указывал это раньше, но это требование к проекту использовать руководство стиля John Papa, поэтому я не могу решить эту проблему, используя $scope в любом из контроллеров.

ОБНОВЛЕНИЕ: Кажется, я неправильно понял цель использования this... основанный на помощи плакатов ниже, теперь я понимаю, что определенные действия требуют использования $scope а руководство по стилю John Papa просто просит разработчиков использовать this когда this необходимо, чтобы избежать конфликтов с пространством, а не в качестве замены сферы

JS

//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;
    }
})();

HTML

<div ng-controller="ParentController as vm">
     <div>PARENT: {{vm.test.label}}</div>
     <div ng-controller="ChildController as vm">
          <div>CHILD: {{vm.test.label}}</div>
     </div>
</div>

РЕЗУЛЬТАТ

PARENT: 'This is being set in the parent controller.'
CHILD: