How to push edited ng repeat data to another array onclick checkbox - angularjs

Question

<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="SubCenter">SubCenter <span class="error">*</span></label>
<span ng-init="GetSubCenter()"></span>
<select class="form-control border-input" id="subcenter" name="subcenter" required multiple="" data-ng-model="AddCamp.subcenter" data-ng-change="GetVillage(AddCamp.subcenter)">
<option ng-repeat="subcenter in SubCenterArray" value="{{subcenter.id}}">{{subcenter.SubCenterName}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" ng-show="vlgdata">
<div class="form-group">
<label class="control-label" for="Village">Villages <span class="error">*</span></label>
<table class="table">
<thead>
<tr>
<th>Population</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="vlg in VillageArray | orderBy : 'Population'">
<td data-title="Population">
<input type="text" class="form-control border-input" value="{{ vlg.Population }}">
</td>
<td>
<input type="checkbox" ng-model="vlg.selectvlg" name="{{vlg}}" ng-click="chk()" />
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-6" ng-show="vlgdata">
<div class="form-group">
<label class="control-label" for="Village">Selected Villages <span class="error">*</span></label>
<table class="table">
<thead>
<tr>
<th>Population</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in selectedvlgs" | orderBy : 'Population'">
<td data-title="Population">{{ p.Population }}</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
//Js start here
//Get subcenter details
$scope.subcenter = null;
$scope.SubCenterArray= [];
$scope.GetSubCenter= function()
{
$http.post("get_subcenter_name.php" , {})
.success(function(data)
{
$scope.SubCenterArray = data;
});
}
//Get vlg details
$scope.vlgdata = false;
$scope.village = null;
$scope.VillageArray= [];
$scope.GetVillage= function(subcenter)
{
$http.post("get_village_name.php" , {'subcenter': $scope.AddCamp.subcenter})
.success(function(data)
{
if(data!=null)
{
$scope.vlgdata = true;
$scope.VillageArray = data;
}
if(data==null)
{
$scope.vlgdata = false;
}
});
}
$scope.selectedvlgs = [];
$scope.chk = function(){
//alert("hii");
angular.forEach($scope.VillageArray, function(value, key){
if(value.selectvlg == true){
var title = value.id;
//alert(title);
var flg = 1;
angular.forEach($scope.selectedvlgs, function(value, key){
var exTitle = value.id;
if(title == exTitle){
flg = 0;
}
});
//alert (value.Product_Name);
if(flg == 1){
$scope.selectedvlgs.push(value);
}
}
if(value.selectvlg == false){
var title = value.id;
//alert(title);
var flg = 1;
angular.forEach($scope.selectedvlgs, function(value, key){
var exTitle = value.id;
if(title == exTitle){
flg = 0;
}
});
//alert(flg);
if(flg == 0){
var index = $scope.selectedvlgs.indexOf(value);
//alert(index);
$scope.selectedvlgs.splice(index,1);
$scope.sum=0;
for(i=0;i<$scope.selectedvlgs.length;i++)
{
$scope.Population=$scope.selectedvlgs[i].Population;
}
}
}
});
}
How to push edited ng repeat data to another array onclick checkbox.?
i am getting VillageArray data onclick of subcenter. In this villageArray i have to edit the population field and push editable value into the selectedvlgs. The editable value does not updating.
How to do this?

Answer 1

One thing to look at potentially is add a timeout and digest.
$timeout( () => {
$scope.$apply();
});
But I think the easier solution would be to utilize a function in the view to sum the bound values. You don't have to explicitly process the totals, you could just easily just sum vlg.selectvlg in the function from the view. Creating a function to loop through vlg.selectvlg
{{ displayVillageTotal() }}
$scope.displayVillageTotal = function() {
let total = 0;
selectvlg.forEach()...
return total;
}
Remove the explicit ng-click function (chk()) and the digest should pick up the change for the function in the view and update accordingly.