Strange AngularJS behavior, values not updating in DOM

Question

I'm having some issues in my application where I'm using setInterval to poll my server every X seconds to check for new messages, when it finds them it adds them to the SQLite database on the application and updates the Object containing the data for displacement on the screen.

The issue is that the values don't update automatically, as you can see in an example provided through this snippet below. Just click the button and you'll notice really quickly t hat nothing is happening in either the ng-repeat or just the standard {{variable}} display.

Click the button again and all of a sudden you have some results, but they're inconsistent and explosive.

var app = angular.module('app', [])
  .controller('Ctrl', function($scope) {

    $scope.console = "";
    $scope.arr = [];

    $scope.init = function() {
      setInterval(function() {
        $scope.arr.push("Value");
      }, 1000);
    };

    $scope.start = function() {
      alert("Started");
      $scope.init();
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>

<div ng-app="app" ng-controller="Ctrl">

  <button ng-click="start()">Start Example</button>
  <br>

  <h5>For each:</h5>

  <div id="repeat-container" ng-repeat="x in arr">
    Value index: {{$index}}
    <br>
  </div>

  <hr>Updating value of array: {{arr}}

  <hr>

  <h5>Console:</h5>
  {{console}}

  <div>

I'm personally working with ng-repeat trying to get these values to display properly when updated through setInterval. There's a custom debug console I added in there, considering console.log doesn't show anything on snippets (Unless it's in the debug window, which I haven't checked, because I'm an idiot).

Why aren't they updating? Usually Angular does a really good job at keeping everything on the page updated and in sync with the values in the scope.

Simon H · Accepted Answer · 2015-10-10 09:52:43Z

1

Basically setInterval creates events that angular does not monitor, so use the use the angular equivalent, $timeout, instead as this triggers a digest cycle. You may need to put the $timeout in a separate function to that it can call itself repeatedly to give you the equivalent of setInterval.

var app = angular.module('app', [])
  .controller('Ctrl', function($scope, $timeout) {

    $scope.console = "";
    $scope.arr = [];

    $scope.init = function() {
      $timeout(function() {
        $scope.arr.push("Value");
      }, 1000);
    };

    $scope.start = function() {
      alert("Started");
      $scope.init();
    };
  });

answered Oct 10, 2015 at 9:52

Simon H

21.2k14 gold badges83 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hobbyist Over a year ago

Your answer triggered my interest, and I found $interval docs.angularjs.org/api/ng/service/$interval

Simon H Over a year ago

Great stuff. $interval is what you need. I'd just forgotten about it

Hobbyist Over a year ago

I'm marking this correct, as it explained what the issue was, and provided a solution. If you would like to edit it containing information about $interval for future viewers, that's fine.

Noldor · Accepted Answer · 2015-10-10 09:55:32Z

0

Using setTimeout and setInterval causes the scope releases update state free. What you're looking for is $scope. $apply() or $interval () and $timeout () functions of angular..

answered Oct 10, 2015 at 9:55

Noldor

1,1829 silver badges23 bronze badges

Comments

Vasim · Accepted Answer · 2015-10-10 09:59:20Z

0

You should try using Angulars $interval service. I think common-js setInterval don't gets the right $scope?!

var app = angular.module('app', [])
  .controller('Ctrl', function($scope, $interval) {

    $scope.console = "";
    $scope.arr = [];

    $scope.init = function() {
      $interval(function() {
        $scope.arr.push("Value");
      }, 1000);
    };

    $scope.start = function() {
      alert("Started");
      $scope.init();
    };
  });

More information here:

edited Oct 10, 2015 at 9:59

Vasim

3,1536 gold badges39 silver badges58 bronze badges

answered Oct 10, 2015 at 9:55

mpielicke

12 bronze badges

Collectives™ on Stack Overflow

Strange AngularJS behavior, values not updating in DOM

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related