Trying to setup the ui-select angular directive to use with my project. I have added the required CDN links in my index.html as seen here:

<html ng-app="angulobby"> <head> <base href="/"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.min.js"></script> <link rel="stylesheet" ng-href="../node_modules/ui-select/dist/select.min.css"> <script type="text/javascript" src="/node_modules/ui-select/dist/select.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css"> <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css">--> <link rel="stylesheet" type="text/css" href="./stylesheets/style.css"> <link rel="stylesheet" type="text/css" href="./stylesheets/index.css"> </head> <body> <div id="container"> <header> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/">AnguLobby Prototype</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="/"><i class="fa fa-home"></i> Home</a></li> <li><a href="/login"><i class="fa fa-shield"></i> Login</a></li> <li><a href="/register"><i class="fa fa-comment"></i> Register</a></li> <div ng-controller="logoutController"> <a ng-click='logout()' class="btn btn-default">Logout</a> </div> </ul> </div> </nav> </header> <div id="ng-view" ng-view></div> </div> <script src="https://use.fontawesome.com/7222f42b52.js"></script> <script src="./main.js"></script> <script src="./services.js"></script> <script src="./controllers.js"></script> </body> </html>

and I have added the ui.select module to my main.js angulobby module as seen here:

var app = angular.module('angulobby', ['ngRoute', 'ngSanitize', 'ui.select']); app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: 'pages/home.html', access: { restricted: true } }) .when('/login', { templateUrl: 'pages/login.html', controller: 'loginController', access: { restricted: false } }) .when('/logout', { controller: 'logoutController', access: { restricted: true } }) .when('/register', { templateUrl: 'pages/register.html', controller: 'registerController', access: { restricted: false } }) .when('/contact', { templateUrl: 'pages/contact.html', access: {restricted: true } }) .otherwise({ redirectTo: '/' }); $locationProvider.html5Mode(true); }]); app.run(function($rootScope, $location, $route, AuthService) { $rootScope.$on('$routeChangeStart', function (event, next, current) { AuthService.getUserStatus() .then(function(){ if (next.access.restricted && !AuthService.isLoggedIn()){ $location.path('/login'); $route.reload(); } }); }); });

When I run the project on localhost, I receive this stack trace in the Chrome console:

Uncaught Error: [$injector:modulerr] Failed to instantiate module angulobby due to: Error: [$injector:modulerr] Failed to instantiate module ui.select due to: Error: [$injector:nomod] Module 'ui.select' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.6.4/$injector/nomod?p0=ui.select at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:66:12 at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:2262:17 at ensure (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:2183:38) at module (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:2260:14) at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:4896:22 at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:403:20) at loadModules (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:4880:5) at https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:4898:40 at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:403:20) at loadModules (https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js:4880:5)

I have looked at plenty of examples but I can't seem to find anything major that is different with my code.

I appreciate your help!