javascript - Strange AngularJS behavior, values not updating in DOM -

i'm having issues in application i'm using setinterval poll server every x seconds check new messages, when finds them adds them sqlite database on application , updates object containing data displacement on screen.

the issue values don't update automatically, can see in example provided through snippet below. click button , you'll notice t hat nothing happening in either ng-repeat or standard {{variable}} display.

click button again , of sudden have results, they're inconsistent , 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 working ng-repeat trying these values display when updated through setinterval. there's custom debug console added in there, considering console.log doesn't show on snippets (unless it's in debug window, haven't checked, because i'm idiot).

why aren't updating? angular job @ keeping on page updated , in sync values in scope.

basically setinterval creates events angular not monitor, use use angular equivalent, $timeout, instead triggers digest cycle. may need put $timeout in separate function can call repeatedly give 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();     };   });