How to handle 'ng-repeat' together 'ng-model' for individual object.? - angularjs

Question

I have an array with objects with 'SALARY' field. I want to manage 'CREDIT' amount using ng-model. so i am create a function and work fine with object id. but in my case when i am change value of any input field it is change all input's values.
Please any one tell me how to possible change input value only desire input field.
this is my html >
<div ng-repeat="obj in myObj">
{{obj.id}} /
{{obj.name}} /
{{obj.salary}} /
<input type="text" ng-model="credit.amount" />
<button ng-click="updateBalance(obj)">Balance</button>
</div>
and this is my script >
var app = angular.module('myApp',[]);
app.controller('employee', function($scope) {
$scope.myObj = [
{ "id" : 1, "name" : "abc", "salary" : 10000 },
{ "id" : 2, "name" : "xyz", "salary" : 15000 }
]
$scope.credit = {"amount" : 0};
$scope.updateBalance = function(obj){
console.log(obj.name + "'s current balance is : ");
console.log(obj.salary - Number($scope.credit.amount));
}
});
and this is my PLNKR LINK.

Answer 1

Values in all input fields are changing because you are binding $scope.credit.amount to all of them. Instead you need to maintain them separately. Following should work:
Html
<tr ng-repeat="obj in myObj">
<td>{{obj.id}} </td>
<td>{{obj.name}} </td>
<td>{{obj.salary}} </td>
<td>
<input type="number" ng-model="credits[obj.id].amount" />
</td>
<td>
<button ng-click="updateBalance(obj)">Balance</button>
</td>
</tr>
Controller
var app = angular.module('myApp', []);
app.controller('employee', function($scope) {
$scope.myObj = [{
"id": 1,
"name": "abc",
"salary": 10000
}, {
"id": 2,
"name": "xyz",
"salary": 15000
}]
$scope.credits = $scope.myObj.reduce(function(acc, object) {
acc[object.id] = { amount: 0 };
return acc;
}, {});
$scope.updateBalance = function(obj) {
var balance = obj.salary - Number($scope.credits[obj.id].amount)
alert(obj.name + ' balance is : ' + balance);
}
});