Dynamically creating ng-model values - angularjs

Question

I am building out a debt consolidation calculator that has two tables that allows the user to add and remove rows. The rows contain 4 inputs for different values:
code plunker: plnkr.co/edit/AS6M8zi3VrqKKgfTGwVT?p=preview
HTML
.directive('cuDebtConsolidation',
function() {
return {
restrict: 'E',
scope: false,
template:
'<div id="debtConsolidationPrint">' +
'<form name="debtConsolidationForm" role="form" data-toggle="validator" novalidate>' +
'<div class="row mb-3 mt-5 mx-auto calcRow">' +
'<div class="col m-3">' +
'<div ng-repeat="table in tables">' +
'<h3 class="mt-4">{{table.name}}</h3>' +
'<table>' +
'<thead>' +
'<tr>' +
'<th>Loan Name</th>' +
'<th>Remaining Balance</th>' +
'<th>Monthly Payment</th>' +
'<th>Loan Term</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr ng-repeat="(rowIndex, row) in table.rows" name="{{row.name}}">' +
'<td><input class="form-control form-control-md text-transform-none" title="Please Enter loan name" maxlength="7" required type="text"></td>' +
'<td><input class="form-control form-control-md text-transform-none" title="Please Enter remaining balance" maxlength="7" required type="number"></td>' +
'<td><input class="form-control form-control-md text-transform-none" title="Please Enter Monthly Payment" maxlength="7" required type="number"></td>' +
'<td><input class="form-control form-control-md text-transform-none" title="Please Enter loan term" maxlength="7" required type="number" ></td>' +
'<td><input type="button" class="btn btn-round btn-sm btn-brand" value="Remove" ng-click="removeRow(rowIndex, table)"/></td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'<button class="btn btn-round btn-sm btn-brand mt-2" ng-click="addRow(table)">Add Row</button>' +
'</div>' +
'<div class="d-flex">' +
'<button class="btn btn-round btn-lg btn-brand d-block mt-2 w-100" ng-click="debtConsolidation();">Calculate!</button>' +
'</div>' +
'</div>' +
'</div>' +
'</form>' +
'</div>'
};
});
Controller:
$scope.tables=[{name: "Installment Table"}, {name: "Credit Card Table"}];
$scope.tables[0].rows = [{name: "row1"}];
$scope.tables[1].rows = [{name: "row1"}];
$scope.counter = 2;
$scope.addRow = function(table) {
table.rows.push({ name: "row" + $scope.counter});
$scope.counter++;
};
$scope.removeRow = function(rowIndex, table) {
table.rows.splice(rowIndex, 1);
};
$scope.debtConsolidation = function() {
console.log($scope.debtConsolidationForm);
};
I use ng-repeat to loop over the two tables and then ng-repeat to loop over the rows. This is all within a form, I'm try to ng-click="debtConsolidation();" run calculations but i cant seem to figure out how to bind the dynamic inputs to then be able to use the data from each dynamic row.

Answer 1

You can give each input an ng-model attribute. This will put a value property on your $scope.tables.rows object.
Here's an example:
'<tbody>' +
'<tr ng-repeat="(rowIndex, row) in table.rows" name="{{row.name}}">' +
'<td><input ng-model="row.loanName" class="form-control form-control-md text-transform-none" title="Please Enter loan name" maxlength="7" required type="text"></td>' +
'<td><input ng-model="row.remainingBalance" class="form-control form-control-md text-transform-none" title="Please Enter remaining balance" maxlength="7" required type="number"></td>' +
'<td><input ng-model="row.monthlyPayment" class="form-control form-control-md text-transform-none" title="Please Enter Monthly Payment" maxlength="7" required type="number"></td>' +
'<td><input ng-model="row.loanTerm" class="form-control form-control-md text-transform-none" title="Please Enter loan term" maxlength="7" required type="number" ></td>' +
'<td><input type="button" class="btn btn-round btn-sm btn-brand" value="Remove" ng-click="removeRow(rowIndex, table)"/></td>' +
'</tr>' +
'</tbody>'
And if you console.log the object in the $scope.debtConsolidation function, you can see the object.