about modular programming in angular - angularjs

Question

I'm learning Angular and have a problem which I can't haddle.
I use ui-router to impelement jumping from login page to welcome page(includes a directory to jump to the corresponding module). The code is:
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login',{
url: '/login',
templateUrl: 'tpls/login.html'
})
.state('welcome', {
url: '/welcome',
templateUrl: 'tpls/welcome.html',
});
});
now I'd like to add a controller to the welcome template in another file(controller.js), and I created a module for it:
var welcomeModule = angular.module("WelcomeModule",[]);
welcomeModule.controller('WelcomeCtrl', function($scope){});
I think the welcomeMoudule should be added into the myApp moudule:
var myApp = angular.module('myApp', ['ui.router','WelcomeModule']);
but there is an Error:
[$injector:modulerr] Failed to instantiate module optApp due to:
[$injector:modulerr] Failed to instantiate module WelcomeModule due to:
[$injector:nomod] Module 'WelcomeModule' 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.
I don't understand why. I've seen a more complicated example using this method and everything's fine. Can someone explain this to me?