JSFiddle - React, Tailwind, and code Playground

by Patrick von Lieres

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div ng-app="myapp">
    <div ng-controller="ChildCtrl as child">
        {{child.getNumberOfUsers()}} users
        <p ng-repeat="user in child.users">{{ user.name }} is a {{user.type}}</p>
    </div>
</div>

JavaScript

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

myapp.constant('users', [{
    name: 'Franz',
    type: 'Broker'
}, {
    name: 'Bob',
    type: 'Customer'
}]);

myapp.factory('aService', function(users) {
    return {
        getUser: function(i) {
            return users[i];
        }
    };
});

function ParentCtrl(aService) {
    this.users = [];
    this.init = function() {
        for (var i = 0; i < 2; i++) {
            this.users.push(aService.getUser(i));
        }
    }
};

myapp.controller('ChildCtrl', function(aService) {
    ParentCtrl.apply(this, [aService]);

    var self = this;
    self.init();

    self.getNumberOfUsers = function() {
        return self.users.length;
    };
});