如何在angularjs中组合两个控制器

angular.module('myApp', [])
  .service('sharedService', function() {
    this.sharedData = 'Hello, World!';
  })
  .controller('Controller1', function($scope, sharedService) {
    $scope.data = sharedService.sharedData;
  })
  .controller('Controller2', function($scope, sharedService) {
    $scope.data = sharedService.sharedData;
  });

angular.module('myApp', [])
  .controller('Controller1', function($scope, $rootScope) {
    $scope.data = 'Hello, World!';
    $rootScope.$broadcast('dataUpdated', $scope.data);
  })
  .controller('Controller2', function($scope) {
    $scope.$on('dataUpdated', function(event, data) {
      $scope.data = data;
    });
  });

<div ng-app="myApp" ng-controller="ParentController">
  <div ng-controller="ChildController">
    {{ data }}
  </div>
</div>

<script>
angular.module('myApp', [])
  .controller('ParentController', function($scope) {
    $scope.data = 'Hello, World!';
  })
  .controller('ChildController', function($scope) {
    // 子控制器可以直接访问父控制器的数据
  });
</script>