As I felt my single controller was growing too large I am now trying to make use of multiple controllers. However, my UserController can't be found for some reason when I navigate to /signup. I'm getting this error:

Error: [ng:areq] Argument 'UserController' is not a function, got undefined

app.js

var app = angular.module('myApp', [

    'ui.router',

    'ngResource',

    'myApp.controllers',

]);



angular.module('myApp.controllers', []);



app.config(function($stateProvider, $urlRouterProvider, $httpProvider) {



  $stateProvider

    .state('signup', {

      url: '/signup',

      templateUrl: 'views/signup.html',

      controller: UserController

    });



});

I'm including the .js files in this order:

<script src=angular/controllers/mainCtrl.js></script> //binded to body tag

<script src=angular/controllers/userCtrl.js></script> //set in signup state

<script src=angular/app.js></script>

UserController

angular.module('myApp.controllers').controller('UserController', function () {



  //do stuff



});

What am I missing?