Object changes inside array but stays unchanged on page - angularjs

Question

I have a table which is made by ng-repeat. That part which doesnt get refreshed is below;
<tbody class="defTbody" ng-repeat="activity in activityList track by activity.ActivityID">
<tr class="{{activity.DetailExpanded == true ? 'shown' : ''}}">
<td>
<a ng-if="!activity.DetailExpanded" ng-click="activity.DetailExpanded = true"><i class="fa fa-fw fa-plus-circle txt-color-green fa-lg"></i></a>
<a ng-if="activity.DetailExpanded" ng-click="activity.DetailExpanded = false"><i class="fa fa-fw fa-minus-circle txt-color-red fa-lg"></i></a>
</td>
<td style="font-size:smaller">
<a ng-click="getActivityStatements(activity.ActivityID)" style="cursor: pointer;">
{{activity.PlanDateTime}} / {{activity.ActivityType_DisplayName}}
<br />
<small class="text-muted"><i>{{activity.ActivityID}}<i></i></i></small>
</a>
</td>
<td style="font-size:smaller">
{{activity.ParentActivityDisplayName}}
<br />
<small class="text-muted"><i>{{activity.ParentActivityID}}<i></i></i></small>
</td>
<td>{{activity.Customer_DisplayName}}</td>
<td>{{activity.ActivityStatus_DisplayName}}</td>
<td>
{{activity.StatusReason}}
<br />
{{activity.StatusReasonNote}}
</td>
</tr>
</tbody>
$scope.activityList is fine, it gets populated correctly. This is how I change an item in activiyList
$scope.UpdateActivityListItem = function (activityID, prevResponseDetail) {
var url = "/api/activity/GetActivityResponse?activityID=" + activityID;
$http({
method: 'GET',
url: url
}).then(function successCallback(result) {
var response = result.data;
if (response.Status == "SUCCESS") {
var activity = $scope.activityList.filter(activity => activity.ActivityID == activityID)[0];
var renewedAct = response.Detail[0];
activity = renewedAct;
$scope.$apply();
console.log("yenilenmiş aktivite:" +$scope.activityList)
$('#modalActivityDetail').modal('hide');
console.log(JSON.stringify($scope.activityList));
$scope.addSpinnerClass(spinner);
}
else {
console.log("fail");
}
},
function errorCallback(result) {
console.log("error");
}
);
};
I confirmed in debug that item gets "updated" nicely but in screen it stays same.
I thought this was kind of a problem whicj $scope.$apply() can solve but adding it (as shown in code piece above) caused this problem
Error: error:inprog
Action Already In Progress
$digest already in progress
What else can I do?
PS: This is written in Angular JS 1.0

Answer 1

check this, You are filtering activityList and updating a filtered array (result) first element not activityList array.
var renewedAct = response.Detail[0];
for (let index = 0; index < $scope.activityList.length; index++) {
const activity = $scope.activityList[index];
if (activity.ActivityID == activityID) {
$scope.activityList[index] = renewedAct;
break;
}
}

Answer 2

You can do that even without looping again using splice with a single line
Here is the code,
var activity = $scope.activityList.filter(activity => activity.ActivityID == activityID)[0];
var index = $scope.activityList.indexOf(activity);
var renewedAct = response.Detail[0];
activity = renewedAct;
$scope.activityList.splice(index, 1, activity)
Note: The above line removes that element at that place and adds your new element.

Answer 3

Before calling $apply please check weather the digest cycle is busy or not.
if(!$scope.$$phase) {
//$digest or $apply
}
---------EDIT------
A new, powerful method has been added to any $scope: $evalAsync. Basically, it will execute its callback within the current digest cycle if one is occurring, otherwise a new digest cycle will start executing the callback.
Try this:
In these cases and all the others where you had a !$scope.$$phase, be sure to use $scope.$evalAsync( callback ) do all related changes in callback.