AngularJS ng-repeat not updating DOM nodes when element is inserted dynamically - angularjs

Question

ng-repeat is not updating DOM nodes when we use same controller name in different area.
<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);
}
});

Answer 1

The problem is that the ng-controller creates a new instance of each controller so the scope is different in the two ng-repeat directives.
One way to fix that is to have a controller that covers both ng-repeats
<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>
The other option is to use a service to store the data like this JSFiddle
Javascript:
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);
}
});
HTML:
<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>