Handling $scope.$watch for dynamically added properties in AngularJS 1.8
Quick question that's been bugging me - I've looked through the documentation and I'm still confused about I'm working with AngularJS 1.8 and I need to observe dynamically added properties on an object in my controller... Specifically, I want to watch for changes on properties that are added to an object based on user interactions. I've tried using `$scope.$watch` directly on the object, but it seems that it doesn't pick up changes for properties that are added after the initial watch is set up. Here’s a simplified version of what I have: ```javascript $scope.data = {}; $scope.addProperty = function(key, value) { $scope.data[key] = value; }; $scope.$watch('data', function(newVal, oldVal) { console.log('Data changed:', newVal); }, true); ``` When I call `$scope.addProperty('newKey', 'newValue')`, the watch function is not triggered, and I don't see any logs. I understand that by default, AngularJS uses a shallow comparison for objects. However, I set the third parameter of `$watch` to `true` to enable deep watching, and it still doesn't capture the dynamic additions. I've also tried using `$scope.$watchCollection` but that doesn't seem to solve the scenario either. Is there a specific way I should structure my code or any best practices to ensure that I can effectively watch for these dynamically added properties? Any help would be greatly appreciated! What am I doing wrong? For context: I'm using Javascript on Ubuntu. Is there a better approach?