AngularJS ng重复在动态插入元素时不更新DOM节点

当我们在不同的区域使用相同的控制器名称时，ng repeat不会更新DOM节点

<div ng-controller="customer">
    <div ng-repeat="number in numberArray">
         {{number}}                                     
   </div>
</div>

<div ng-controller="customer">
    <div ng-repeat="number in numberArray">
         {{number}}                                     
   </div>
   <input type="text" ng-model="ncDialText"/>
   <button ng-click="add()"/>
</div>

myApp.controller('customer',function($scope, $http) {
       $scope.numberArray =[];
       $scope.add = function() { 
          $scope.numberArray.push($scope.ncDialText);
       }    
});

---

问题是ng控制器为每个控制器创建一个新实例，因此两个ng repeat指令的作用域不同

解决这个问题的一种方法是使用一个覆盖两个ng重复的控制器

<div ng-app="myApp" ng-controller="customer">
    <div >
        <div ng-repeat="number in numberArray">
             {{number}}                                     
       </div>
    </div>

    <div >
        <div ng-repeat="number in numberArray">
             {{number}}                                     
       </div>
       <input type="text" ng-model="ncDialText"/>
        <button ng-click="add()">Add</button>
    </div>
</div>

HTML:

var myApp = angular.module('myApp', []);
myApp.factory('customerService', function() {

    var _self = this;

    _self.numberArray = [];

    return {
        numberArray: _self.numberArray
    }
});

myApp.controller('customer',function($scope, $http, customerService) {
       $scope.numberArray = customerService.numberArray;
       $scope.add = function() { 
           customerService.numberArray.push($scope.ncDialText);
       }    
});

<div ng-app="myApp">
    <div ng-controller="customer">
        <div ng-repeat="number in numberArray">
             {{number}}                                     
       </div>
    </div>

    <div ng-controller="customer">
        <div ng-repeat="number in numberArray">
             {{number}}                                     
       </div>
       <input type="text" ng-model="ncDialText"/>
        <button ng-click="add()">Add</button>
    </div>
</div>