Using Multiple Angular Controllers with Yeoman

I'm building a practice app in Angular using Yeoman. I'm trying to keep my controllers in separate files.

However, when going to my "register" route, it throws an error in Chrome dev tools:

"Error: [ng:areq] Argument 'RegisterCtrl' is not a function, got undefined http://errors.angularjs.org/1.2.6/ng/areq?p0=RegisterCtrl&p1=not%20aNaNunction%2C%20got%20undefined".

Even though it throws an error, I'm still able to visit the register page and see the "hello world" content.

I've looked at:

• AngularJS: How do I create controllers in multiple files
• How to create separate AngularJS controller files?

But neither helped solve my problem, despite trying some of their recommendations.

Currently, my app is laid out as:

app   
...
--scripts  
---controllers  
-----main.js  
-----register.js
---app.js
...

When I move the contents of register.js into Main.js, it no longer throws an error.

App.js looks like this:

angular.module('angYeomanApp', [
'ngCookies',  
'ngResource',  
'ngSanitize',  
'ngRoute',  
'ui.bootstrap'  
 ])  
   .config(function ($routeProvider) {
     $routeProvider
       .when('/', {
         templateUrl: 'views/main.html',
         controller: 'MainCtrl'
        })
       .when('/register', {
         templateUrl: 'views/register.html',
         controller: 'RegisterCtrl'
       })
       .otherwise({
         redirectTo: '/'
       });
    });

Main.js:

angular.module('angYeomanApp')
  .controller('MainCtrl', function ($scope) {

});

Register.js:

angular.module('angYeomanApp')
  .controller("RegisterCtrl", function ($scope) {

});

Any help would be much appreciated!