components.js

myApp.component('users', {
    bindings: {
        users: '<'
    },
    template: '<ul class="list-group"><user ng-repeat="user in ctrl.users" user="user"></user></ul>',
    controllerAs: 'ctrl',
    controller: function(userService) {
        if (userService.checkRole()) {
            this.admin = true;
        } else {
            this.users = [];
            this.users.push(userService.getUser(userService.current.name));
        }
    }
});

myApp.component('user', {
    bindings: {
        user: '<',
    },
    template: '<li class="list-group-item">{{ ctrl.user.name }} <span ng-if="ctrl.loading">Loading... <i class="fa fa-spin fa-cog"></i></span>{{ ctrl.outcome }}</li>',
    controllerAs: 'ctrl',
    controller: function(userService, $timeout) {
        var ctrl = this;
        ctrl.loading = true;
        $timeout(function() {
            ctrl.loading = false;
            ctrl.outcome = (ctrl.user.name === userService.current.name) ? 'Logged In' : ''
        }, 500)
    }
});

userService.js

myApp.service('userService', function () {

    this.current = {
        'name': 'Ben',
        'role': 'admin',
        'picture': '/path/to/file.jpg'
    };

    this.users = [
        {
            'name': 'Ben',
            'role': 'admin',
            'picture': '/path/to/file.jpg'
        },
        {
            'name': 'Tamara',
            'role': 'user',
            'picture': '/path/to/file.jpg'
        }, {
            'name': 'Niamh',
            'role': 'user',
            'picture': '/path/to/file.jpg'
        },
    ];

    this.getCurrent = function () {
        return this.current;
    };

    this.getUser = function(name) {
        return this.users.find(x => x.name === name);
    };

    this.getUsers = function () {
        return this.users;
    };

    this.checkRole = function () {
        if (this.current.role === 'admin') {
            return true;
        } else {
            return false;
        }
    }
})