How to keep calling a function when scope variable changes?

Question

I have a controller that looks like

.controller('GraphsController', function($scope, TemperaturePoller, SoundPoller){
    $scope.temperatures = {readings: [], dateTimes: []}
    $scope.temperatures = TemperaturePoller.data;

    $scope.$watch(function(scope) {return scope.temperatures},
                  function(newValue, oldValue) {
                    console.log("Value Changed: " + newValue);
                    $scope.graph(newValue);
                  })

    $scope.graph = function(data) {
        console.log('values changes, refreshing graph');
    }
})

and the value is retrieved from Server every 10 seconds

.factory('TemperaturePoller', function($http, $timeout){
    var data = {};
    var poller = function() {
        $http.get('http://localhost:8080/monitoring/rest/graph/temperature').then(function(r){
            data = extractTemperatureReadings(r.data)
            data.calls++;
            $timeout(poller, 10000)
        });
    }
    poller();

    return {
        data: data
    }
})

I want the $scope.graph to be called everytime the $scope.temperature changes

I see on browser console.log , that it is called just once

Value Changed: [object Object] monitoring.js:19 values changes, refreshing graph

How can I force it to be called every 10 seconds since I know the data from API is changing?

Answer 1

Since the data you're watching is an object, set the objectEquality flag on the $watch function to true . This is given as a third parameter.

$scope.$watch('temperatures', function(newValue, oldValue) {
     console.log("Value Changed: " + newValue);
     $scope.graph(newValue);
}, true);