javascript - Display list of data - one by one -

i want display list of data:

<li ng-repeat="d in list_of_data">     <div class="line">        {{ d }}     </div> </li> 

but want have pause between appearance each line of data, use such code:

function myctrl($scope) {     $scope.list_of_data = [];      $scope.start = function() {         var = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];          var addelement = function(i) {             alert(i);             $scope.list_of_data.push(a[i]);             if (i < a.length - 1)                 settimeout(function() { addelement(i+1); }, 1000);          }          addelement(0);                         };    } 

but when launch code numbers (0..9) in alert window, 1 div ('one') in page. why ?

here jsfidlle

the issue function passed first argument of settimeout executed out of digest cycle , view not updated. better use $timeout service of settimeout function:

by way, me looks better solution applying limitto filter , increment limit $interval:

angular.module('myapp', [])    .controller('myctrl', function($scope, $interval) {      $scope.list_of_data = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];        $scope.limit = 0;        $scope.start = function() {        $interval(function() {          $scope.limit += 1;        }, 1000, $scope.list_of_data.length);      };    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>    <div ng-app="myapp">    <div ng-controller="myctrl">      <a href="#" ng-click="start()">press me</a>       <ul>        <li ng-repeat="d in list_of_data|limitto:limit">          <div class="line">{{d}}</div>        </li>      </ul>    </div>  </div>