AngularJS 1.8: Issues with $watch not detecting changes in a nested object after asynchronous update
I'm working with AngularJS 1.8 and I'm facing an issue where a `$watch` on a nested object isn't detecting changes after the object is updated asynchronously. I have a service that fetches data from an API and updates a nested property of an object. However, my `$watch` isn’t getting triggered, and I’m not seeing the expected updates in the view. Here's a snippet of my code: ```javascript app.controller('MyController', function($scope, MyService) { $scope.data = { user: { name: '', age: 0 } }; $scope.$watch('data.user.name', function(newVal, oldVal) { console.log('Name changed from', oldVal, 'to', newVal); }); MyService.getUserData().then(function(response) { // This updates the nested object $scope.data.user.name = response.data.name; }); }); ``` My expectation is that when `response.data.name` is returned from the service, the `$watch` should trigger and log the name changes. However, I see that it doesn't log anything. I have tried using `angular.copy()` to explicitly refresh the object, but that didn't help. Also, I’ve verified that the service is returning the correct data and the `$watch` is correctly set up. I suspect it might be related to how AngularJS handles digest cycles with asynchronous calls. Is there a way to ensure `$watch` picks up the changes to the nested object? Would using `$apply()` or `$timeout()` help here, and if so, how should I implement that? Any advice or solutions would be greatly appreciated!