Angular: Dynamic List

http://angularjs.org/

by demas

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">    
    <a href="#" ng-click="start()">press me</a>  
    
    <ul>
      <li ng-repeat="d in list_of_data">
          <div class="line">
             {{ d }}
          </div>
      </li>
   </ul>
</div>

CSS

.line {
    background-color: red;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 29px;
}

JavaScript

var myApp = angular.module('myApp',[]);


function MyCtrl($scope) {
    $scope.list_of_data = [];
    
    $scope.start = function() {
        var a = ['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);                    
    };
    
    
}