在AngularJS中处理同一模板的多个控制器？

<div ng-controller="Controller1">
  <!-- 控制器1的内容 -->
</div>

<div ng-controller="Controller2">
  <!-- 控制器2的内容 -->
</div>

app.controller('Controller1', function() {
  var vm = this;
  vm.message = 'Hello from Controller1';
});

app.controller('Controller2', function() {
  var vm = this;
  vm.message = 'Hello from Controller2';
});

<div ng-controller="Controller1 as ctrl1">
  {{ ctrl1.message }}
</div>

<div ng-controller="Controller2 as ctrl2">
  {{ ctrl2.message }}
</div>

app.service('DataService', function() {
  var data = 'Shared data';

  this.getData = function() {
    return data;
  };

  this.setData = function(newData) {
    data = newData;
  };
});

app.controller('Controller1', function(DataService) {
  var vm = this;
  vm.data = DataService.getData();
});

app.controller('Controller2', function(DataService) {
  var vm = this;
  vm.data = DataService.getData();
});