How to iterate elements from sliced array? - angularjs

Question

JS :
var populateRecord = function(data) {
var chunk = 40;
$scope.users = [];
console.log(data.length + "hi");
for (var i = 0; i < data.length; i += chunk) {
console.log("inside for");
// userCount++;
$scope.users.push(data.slice(i, i + chunk));
// console.log(temp);
}
console.log($scope.users)
};
HTML :
<div ng-repeat="record in users track by $index">
<div class="col-md-2 col-sm-2 col-xs-2">
<label>
<input type="checkbox" ng-model="isAllSelected" ng-change="userSelectedToggle()" ng-checked="isAllRecordSelected(record)">
</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="text-overflow">
<span ng-model="record.dispalyName">{{record.displayName}}</span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<span ng-model="record.mobile"> {{record.mobile}}</span>
</div>
</div>
Output on console after 'populateRecord '
2 inside for
2[array(40) ,array(7)]
Now first I want to show 40 elements and after clicking on button ONLY second array should display on screen. Any solution ?

Answer 1

You just have to keep a counter and increment the index of users array by one on click of the button publish and store it in a new array which will be used for rendering the UI.
JS:
var counter=0;
$scope.sendBulkMessages=function(){
counter=counter +1;
//do your calculations with $scope.parent before assigning it to next 40 elements
$scope.parent=$scope.users[counter];
console.log($scope.parent);
}
Fiddle: http://jsfiddle.net/brtmzqLk/3/