how to properly use $interval in Angular 1.7 controller to auto-refresh data in a view?

Question

I'm trying to auto-refresh a table in my Angular 1.6 app, by using:

function monitoringConfigurationCtrl($scope, $http,$interval){


    $interval($http.get('/monitoringresults').
    then(function(response) {
        $scope.monitoringResults = response.data;
    }),10000);
...
)

I'm getting this error in the browser console:

angular.js:13236 TypeError: f is not a function
    at r (angular.js:12053)
    at m.$eval (angular.js:16820)
    at m.$digest (angular.js:16636)
    at m.$apply (angular.js:16928)
    at angular.js:12043

The html view looks like this:

<div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>Resource</th>
                                <th>Monitoring Method</th>
                                <th>Monitoring Parameters</th>
                                <th>Last Probed</th>
                                <th>Result</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="result in monitoringResults">
                                <td>{{ result.monitoring_target }}</td>
                                <td>{{ result.monitoring_method }}</td>
                                <td>{{ result.monitoring_parameter }}</td>
                                <td>{{ result.date_recorded }}</td>
                                <td>{{ result.monitoring_result }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

What is the proper way to implement such live refresh with Angular 1.X?

Answer 1

This looks like just a syntax error. The issue is that you're actually calling your function in the parameter of $interval, as opposed to passing a function reference.

If you just wrap your call in a function, it should work:

$interval(function () {
  $http.get('/monitoringresults').
    then(function(response) {
        $scope.monitoringResults = response.data;
    });
}),10000);