var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope , $interval) {
var counter=0;
$scope.details = getNewList();
$interval(function(){
var i=$scope.details.length;
$scope.details=$scope.details.concat(getNewList());
// [].push.apply($scope.details,getNewList());
},1000);
function getNewList(){
var list=[];
for(var i = 0; i<10; i++){
counter+=1;
list.push({num : counter, square : Math.pow(counter,2), cube:Math.pow(counter,3)});
}
return list;
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul ng-repeat="detail in details">
<li style="display:flex" ng-class="{'yellow':detail.cube%3}">
<div class="card" >
<div><img src="onja.png"/><b>num:{{detail.num}}</b></div>
<div><img src="onja.png"/>square: {{detail.square}}</div>
<div><img src="onja.png"/>cube:{{detail.cube}}</div>
</div>
<div><img src="onja.png"/></div>
</li>
</ul>
</body>
</html>
/* Put your css in here */
.yellow{background:yellow}
.card{width:50%}