Angular Controller doesn't seem to work

I'm building a simple Sigle Page Application with AngularJs, which retrieves data stored on a server-based application. Below are the files I'm using:

index.html:

<!DOCTYPE html>
<html ng-app="Js-Users-App">

<head>
    <meta charset="utf-8">
    <title>Js Users</title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>

</head>
<body>
    <nav class="white" role="navigation">
        <div class="nav-wrapper container">
            <a id="logo-container" href="#/" class="brand-logo">Js Users</a>
            <ul class="right hide-on-med-and-down">
                <li><a href="#/add">Add</a></li>
            </ul>

            <ul id="nav-mobile" class="side-nav">
                <li><a href="#/add">Add</a></li>
            </ul>
            <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
        </div>
    </nav>

    <div class="container">
        <div ng-view></div>
    </div>



    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/angular-route/angular-route.min.js"></script>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/materialize-css/dist/js/materialize.min.js"></script>

    <script type="text/javascript" src="app/app.js"></script>
    <script type="text/javascript" src="app/main/main.js"></script>
    <script type="text/javascript" src="app/user-data-factory/user-data-factory.js"></script>

</body>
</html>

main.html:

<div class="page-header">
   <h2 id="tables">Pagination in Angular Js</h2>
</div>
<div ng-controller="UsersList">
    <table class="table striped">
        <thead>
            <tr>
                <th>Last Name</th>
                <th>First Name</th>
                <th>Created At</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="user in users">
                <td>{{user.last_name}}</td>
                <td>{{user.first_name}}</td>
                <td>{{user.created_at}}</td>
                <td>{{user.status}}</td>
            </tr>
        </tbody>
    </table>
</div>

main.js:

angular.module('Js-Users-App', []).controller('UsersList', UsersList);

function UsersList($scope){
    $scope.users = [];

    userDataFactory.userList().then(function(response) {
        $scope.users = response.data;
    });
}

user-data-factory.js:

angular.module('Js-Users-App').factory('userDataFactory', userDataFactory);

function userDataFactory($http) {
    return {
        userList: userList
    };

    function userList() {
        return $http.get("users.json").then(complete).catch(failed);
    }

    function complete(response) {
        return response;
    }

    function failed(error) {
        console.log(error.statusText);
    }
}

app.js:

var app = angular.module("Js-Users-App", ["ngRoute"]).config(config);

function config($routeProvider) {

    $routeProvider
    .when("/", {
      templateUrl: "app/main/main.html"
    })
    .when("/add", {
      templateUrl: "app/addUser/addUser.html"
    })
    .otherwise({
      redirectTo: "/"
    });
}

I have started a server, but the application is showing only the navigation bar, without the table. I've also checked the console, but it doesn't show any error or warning. Moreover, I've tried to print some messages on with console.log, however, no message is shown. The application is running on a simple web server, started with python -m SimpleHTTPServer. I've checked everywhere, but it doesn't seem there is any typo. Also, the paths of the files seem to be correct. Where do you think is the problem? I'm still new to AngularJs, so, probably, I can't debug properly. Thanks.

Solution

As said in comments, you need to inject userDataFactory as a dependency in your controller.

And then, don't forget to inject dependencies with $inject.

Additionnal point, no need to specify an array of dependencies injection in your module usage. angular.module('Js-Users-App', []) becomes angular.module('Js-Users-App').

angular.module('Js-Users-App').controller('UsersList', UsersList);

UsersList.$inject = ['$scope', 'userDataFactory'];

function UsersList($scope, userDataFactory){
    $scope.users = [];

    userDataFactory.userList().then(function(response) {
        $scope.users = response.data;
    });
}