I am using an AngularJS application where I have a chat feature on the right side for communication with my clients.
Here is the HTML code:
<div class="recent" ng-show="show_chat_list">
<h2></h2>
<div ng-repeat="customer in recent_customer_list track by $index" ng-click="start_chat(recent_client_id[$index])" class='user'>
<a href="#" ng-class="{'red-background': notify[$index]}">
<img ng-src="">
<div class="user-data">
<span class='name'> {{ notify }} </span>
<span class='name'>{{ customer.name }}</span>
</div>
</a>
</div>
</div>
To update the list, I use a factory that polls every second for new information:
factory('Poller', ["$http", "store", "URL", function($http, store, URL){
var data = {
"hairdresser_id": store.get("userId")
}
var poller = function(){
return $http.post(URL.url + 'check_for_notifications', data).then(function(res){
return(res.data);
});
}
return {
poll: poller
};
}]);
In the controller:
pollData();
function pollData(){
Poller.poll().then(function(res){
$scope.recent_customers_list = res.customers;
console.log($scope.recent_customers_list[0].name);
$scope.recent_client_id = res.clients_id;
$scope.notify = res.notify;
$timeout(pollData, 1000);
});
}
The issue I am facing is that even though the console log displays the correct name, the changes are not reflected dynamically in the client list displayed in the HTML (for example, when changing names or adding a client).
When I try to insert
$scope.$apply();
or
$scope.$digest;
right before the $timeout line, I receive the error:
Error: [$rootScope:inprog] $digest already in progress
If I place apply right after the function line pollData() and before Poller.poll(), I get this error:
Error: [$rootScope:inprog] $apply already in progress
However, my list still does not update. I have to refresh the page to see the changes. How can I resolve this issue?