Angular. How to link directive and controller?

Question

JavaScript

Hello! I'm writing a simple application and I'm already tired of sorting out the errors that engular writes to me ... They are incomprehensible to me ... The bottom line is - I want to connect the controller so that it works with the directive. ALL! I read the docs, questions on SO, a bunch of tutorials... I can't understand what is required of me...
Here is the code

app.js

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

controllers.js

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

  app.factory('socket', function ($rootScope) {
    var socket = io('http://localhost:9999/');
    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', 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',
      templateUrl: 'js/templates/users-list.html'
    };
  });

  app.controller('ChatsController', function($scope, socket) {
    $scope.messages = [];
    $scope.send = function(msg){
      console.dir(msg);
      socket.emit('common chat message', msg || {});
    };
  })
  .directive('usersChats', function(){
    return {
      restrict: 'EA',
      templateUrl: 'js/templates/users-chats.html'
    };
  });
})();

users-list.html

<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>

Well, I insert it into index.html
<users-list></users-list>
But the variables and functions of the controller are undefined (I look with the help of Batarang)...

click is undefined
send is undefined

And if I write

<div ng-controller="UsersController" users-list></users-list>

Writes to me

Error: [$injector:unpr] errors.angularjs.org/1.4.4/$injector/unpr?p0=eProv...

Tried to separate the directive and the controller, write an array for DI, write this instead $scope, whatever... Either the variables are undefined, or the above error... WHAT?
Angular from here
Socket.IO from here
PS I compile with Gulp. Here is the build script:

gulpfile.js

var gulp = require('gulp'),
    csso = require('gulp-csso'),
    concat = require('gulp-concat'),
    minify = require('gulp-minify');

gulp.task('default', function() {
    gulp.src([
        "pub/js/app.js",
        "pub/js/controllers/controllers.js"
    ])
    .pipe(concat('rooms-app.js'))
    .pipe(minify())
    .pipe(gulp.dest('pub/'));

    gulp.src([
        "pub/css/*.css"
    ])
    .pipe(concat('rooms-app.css'))
    .pipe(csso())
    .pipe(gulp.dest('pub/'));
});

PPS Here is an example in JSFiddle

Answer 1

Under jsfiddle it was not possible to launch.
But here's a version that pretends to work: plnkr.co/edit/iNTPWJOuQhVtC84SaQ6C?p=preview