JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<body ng-app="rooms">
    <div>
        <users-list></users-list>
        <users-chats></users-chats>
    </div>
</body>

CSS

#users, #rooms {
    height:100%;
    position:absolute;
    display:inline-block;
    border:1px solid #777;
}
#users {
    width:20%
}
#rooms {
    width:79%;
    margin-left:21%;
}
#userList {
    list-style-type:none;
}

JavaScript

(function () {
    var app = angular.module('rooms', ['rooms.controllers']);
})();
(function () {
    var app = angular.module('rooms.controllers', []);

    app.factory('socket', function ($rootScope) {
        var socket = io();
        return {
            on: function (eventName, callback) {
                socket.on(eventName, function () {
                    var args = arguments;
                    $rootScope.$apply(function () {
                        callback.apply(socket, args);
                    });
                });
            },
            emit: function (eventName, data, callback) {
                socket.emit(eventName, data, function () {
                    var args = arguments;
                    $rootScope.$apply(function () {
                        if (callback) {
                            callback.apply(socket, args);
                        }
                    });
                })
            }
        };
    });

    app.controller('UsersController', ['$scope', 'socket', function ($scope, socket) {
        $scope.leaders = [{
            leader: 'Test Leader',
        }];
        $scope.click = function () {
            alert($scope);
        }
        socket.emit('user online');
        socket.on('user online', function (leaders) {
            console.dir(leaders);
            $scope.leaders = leaders;
        });
    }]).directive('usersList', function () {
        return {
            restrict: 'EA',
            template: '<div id="users"><h3 ng-click="click()">users</h3><ul id="userList" class="list-group"><li class="list-group-item" ng-repeat="u in leaders" ng-click="alert(u.leader)">{{u.leader}}</li></ul></div>'
        };
    });

    app.controller('ChatsController', ['$scope', 'socket', function ($scope, socket) {
        $scope.messages = [];
        $scope.send = function (msg) {
            console.dir(msg);
            socket.emit('common chat message', msg || {});
        };
    }]).directive('usersChats',...