After some reflection, I realize now what you are trying to achieve. Here is a revised version of the code that I believe addresses your requirements:
html
<div ng-repeat="(key, item) in vm.numbers track by $index">
<input type="text" ng-model="item" ng-change="vm.updateSum()">
</div>
<button ng-click="vm.addInput()">+</button>
<br><br>
array:
<div>{{vm.numbers}}</div>
sum:
<div>{{vm.sum}}</div>
js:
var vm = this;
vm.numbers = [99,2,3,4,5,6,7,8];
vm.sum = 0;
vm.updateSum = function() {
for (var i = 0; i < vm.numbers.length; i++) {
vm.sum = vm.sum + vm.numbers[i];
}
}
vm.updateSum();
vm.addInput = function(){
vm.numbers[vm.numbers.length] = 0;
}
http://plnkr.co/edit/XiI8Sc?p=preview
Prior response:
This scenario lends itself well to utilizing a directive or multiple directives depending on your workflow requirements. A common situation with similar solutions involves validating two fields to ensure they match (e.g., "confirm password" during registration). I suggest exploring that topic further.
In the meantime, simulate the functionality as needed. Here's a plunker demonstrating basic functionality using a $watch:
js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var vm = this;
$scope.$watch('vm.one', function() {
vm.three = parseInt(vm.one) + parseInt(vm.two);
console.log('one change');
});
$scope.$watch('vm.two', function() {
vm.three = parseInt(vm.one) + parseInt(vm.two);
});
});
html
<body ng-controller="MainCtrl as vm">
<input type="text" ng-model="vm.one"><br><br>
<input type="text" ng-model="vm.two"><br><br>
<input type="text" ng-model="vm.three">
<div>{{vm.one}}</div>
<div>{{vm.two}}</div>
<div>{{vm.three}}</div>
</body>
http://plnkr.co/edit/8J7X0p?p=info