JSFiddle - React, Tailwind, and code Playground

by Michael Bazos

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<div ng-app="myApp" ng-controller="DemoController">	
    <div ng-repeat="person in persons track by $index">
        <div>{{::person.firstName}} {{::person.lastName}}</div>
    </div>
</div>

JavaScript

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


angular.module('myApp').controller('DemoController', function ($scope, $chunkNorris, myService) {
    
    myService.getPersons().then(function (persons) {
        $scope.persons = $chunkNorris(persons);
    });
    
});

angular.module('myApp').service('$chunkNorris', function ($q, $timeout) {
    var service = this;
    
    service.chunk = function (array) {
        
        var uid = 'generatedUID';
        
        service[uid] = array.slice(0, 10);
        
        $timeout(function () {
            service[uid].push(array[0]);
            service[uid].push(array[0]);
            service[uid].push(array[0]);
            service[uid].push(array[0]);
            service[uid].push(array[0]);
        }, 3000);
        
        return service[uid];
    };
    
    return service.chunk;
});
























// A service that fetches some big data
angular.module('myApp').service('myService', function ($q) {
    var firstNames = ['Igor', 'Misko', 'Brad', 'Vlad', 'John'],
        lastNames = ['Minar', 'Hevery', 'Green', 'Dracul', 'Doe'],
    	NB_PERSONS = 100000,
        persons = [];
    
    function _generatePerson () {
        return {
            firstName: _.sample(firstNames),
            lastName: _.sample(lastNames)
        };
    }
    
    this.getPersons = function () {
        for (var i = 0; i < NB_PERSONS; i++) {
        	persons.push(_generatePerson());
    	}
        return $q.when(persons);
    };
    
    return this;
});