Refresh a DIV Every 10 Seconds in AngularJS with $interval

AngularJS can update a value inside a div on a timer with its $interval service. The timer runs inside AngularJS’s digest cycle, so bound text updates without reloading the page.

AngularJS reached end of support, and the npm package labels it deprecated. Keep this approach for an application that already uses AngularJS. For new work, use supported Angular or another maintained framework.

What $interval changes

AngularJS renders a div again after a bound value changes, without reloading the document.

$interval is AngularJS’s timer service, and it returns a promise-like handle you keep when the timer must stop.

var timer = $interval(function () {
  // Update a scope value or call a refresh function.
}, 10000);

The second argument is milliseconds, so 10000 runs the callback every 10 seconds, and the callback should fetch or compute only the data your view needs because an orphaned timer continues work after its controller is gone.

Update a div on an AngularJS timer

This markup binds a controller alias to the div. The paragraph reads the message from that controller, and the button calls its stop method.

<div ng-app="refreshDemo" ng-controller="RefreshController as demo">
  <p aria-live="polite">{{ demo.message }}</p>
  <button type="button" ng-click="demo.stop()" ng-disabled="demo.stopped">
    Stop refresh
  </button>
</div>

Add the AngularJS library before the application script. A maintained application may already load it in its shared layout.

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

The controller starts at zero, changes its message after each tick, and stores the handle returned by $interval. The ten-second delay belongs in the service call, not in the template.

angular.module('refreshDemo', [])
  .controller('RefreshController', function ($scope, $interval) {
    var demo = this;
    var count = 0;
    var timer;

    demo.message = 'This div has refreshed 0 times.';
    timer = $interval(function () {
      count += 1;
      demo.message = 'This div has refreshed ' + count + ' times.';
    }, 10000);

    $scope.$on('$destroy', function () {
      if (angular.isDefined(timer)) {
        $interval.cancel(timer);
        timer = undefined;
      }
    });

    demo.stop = function () {
      if (angular.isDefined(timer)) {
        $interval.cancel(timer);
        timer = undefined;
        demo.stopped = true;
      }
    };
  });

The same controller can call a function that requests data from your server. Keep the request separate from the timer setup so you can run it once at page load and handle failures without hiding them behind the next tick.

Stop the timer when the controller is destroyed

A stop button is useful, but a route change can remove the controller without anyone pressing it. Listen for the $destroy event and cancel the handle there as well.

$scope.$on('$destroy', function () {
  if (angular.isDefined(timer)) {
    $interval.cancel(timer);
    timer = undefined;
  }
});

Inject $scope into the controller when you use this cleanup hook. $interval.cancel accepts the handle returned by $interval, so canceling an unrelated handle does not stop this timer.

Verify that cancel works

The test advanced the timer by 30000 milliseconds in AngularJS, canceled the returned handle, then advanced it again. The message remained at three after cancellation.

This div has refreshed 3 times.
After cancel: This div has refreshed 3 times.

If your view also needs AngularJS bindings elsewhere, two-way data binding in AngularJS explains how changes reach the template. The AngularJS tutorial gives the wider module and controller context behind this small timer example.

Frequently asked questions

These answers separate a scheduled view update from a browser reload and show when the timer handle matters.

Does $interval reload the page?

$interval calls a JavaScript function on a schedule and leaves the browser document loaded unless your callback explicitly navigates or reloads it.

How do I schedule an AngularJS function?

Store the result of $interval(function, 10000) in a variable, then pass that variable to $interval.cancel when the timer must stop.

When is $interval appropriate?

Use it only when you maintain an AngularJS application. AngularJS is no longer supported, so a new application should start with a supported framework and its documented scheduling tools.