Within my controller, I am looking to receive notifications when the value of a certain variable changes. Specifically, I want a function to be triggered whenever this variable is updated. To achieve this, I am utilizing the $watch method in AngularJS. Here is an example of how my code is structured:
var Canvas = angular.module('canvas');
Canvas.controller("excelOperation",function($scope,Data,SharedData,$http){
$scope.tbody=$scope.$parent.shared.previews;
$scope.$watch('$parent.shared.previews',function(newVal,oldVal){
console.log("WORKING");
})
setInterval(function(){
console.log($scope.$parent.shared.previews);
},1000)
/**
* Populate table function to populate excel table
*/
$scope.populateTable=function()
{
}
})
angular.bootstrap(document.getElementById("page"), ['canvas']);However, I have encountered an issue where the $watch does not seem to be functioning properly unless I manually refresh the page. Despite the fact that the setInterval is correctly displaying the changed variable value, the $watch fails to trigger.
Side Note: $scope.$parent.shared.previews is an object
My question is: what mistake am I making? And is there a better approach to achieving what I intend to do?