Using AngularJS getterSetter with ng-repeat - angularjs

Question

Using AngularJS 1.6 I have a simple input that uses a getter-setter model:
<input name="bar" type="number"
ng-model="dialog.bar" ng-model-options="{getterSetter:true}" />
The getterSetter option means I can have all the values pass through a method in my controller, for validation and/or updating other values, for example:
let bar = null;
this.bar = function(value) {
if (arguments.length) {
validate(value);
bar = value;
update();
}
return bar;
}
And that works very nicely.
Now I have a foo object that has multiple bar values inside it. I don't know how many bars there will be. I want to create an input for each bar. The UI is simple enough using ng-repeat:
<div ng-repeat="bar in foo.getBars()">
<input name="bar{{$index}}" type="number"
ng-model="dialog.bar" ng-model-options="{getterSetter:true}" />
</div>
Ah, but how do I link the model back to a getter-setter? I somehow would need to indicate to the getter-setter which $index is being used. I could of course use an array of model values directly, but then I wouldn't get the benefit of a getter-setter!

Answer 1

The best idea I've come up with so far is to use an array of getter-setters. Then the model looks like this:
<div ng-repeat="bar in foo.getBars()">
<input name="bar{{$index}}" type="number"
ng-model="dialog.bars[$index]" ng-model-options="{getterSetter:true}" />
</div>
Then for each bars[x] I simply create a separate function that each remembers the $index using closure via normal loop:
const bars = Array(max).fill(0); //values
this.bars = Array(max); //getter-setter functions
for(let i=0; i<max; i++) {
this.bars[i] = function(value) {
if (arguments.length) {
validate(value);
bars[i] = value;
update();
}
return bar;
}
}
Any better ideas?