My issue involves using nested ng-repeat to iterate through properties of an array of objects and connecting the model of the objects' values to inputs. The problem arises when the values inside the inputs are changed, the model fails to update.
var app = angular.module('app', []);
app.controller('main', function($scope) {
var vm = this;
vm.data = [{
"user": "*US/",
"lowFare": "*TP/<amount>/S<segment>/P<passenger>",
"fullFare": "*PR/<amount>/S<segment>/P<passenger>",
"selectedReason": "*REA/"
}, {
"user": "US/",
"selectedReason": "REA/"
}];
vm.description = {
"user": "User",
"lowFare": "Lowest fare *",
"fullFare": "Fare without restrictions *",
"selectedReason": "Reason for applying the fare"
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-cloak>
<div ng-controller="main as ctrl">
<div ng-repeat="block in ctrl.data">
<h4 align="center">block number {{$index}}</h4>
<table align="center">
<tr ng-repeat="(key,value) in block" align="center">
<td><span>{{ctrl.description[key]}}:  </span>
</td>
<td>
<input ng-model="value" />
</td>
</tr>
</table>
</div>
<h3 align="center">
<br/>Make a change and notice that the model doesn't update:  
<br/>
</h3>
<p>
{{ctrl.data}}
</p>
</div>
</div>