ngRoute - multiple controllers in separate files

I am now in the process of changing my web app to single page web app . i followed tutorial from this .link

this is a sample script.js

// script.js

// create the module and name it scotchApp
    // also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'pages/about.html',
            controller  : 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'pages/contact.html',
            controller  : 'contactController'
        });
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

scotchApp.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

since my controllers are large and more in number , i have separated them into individual files .

but now the controllers are not recognised ..

Solution

Updated with separated controllers and html views.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js'></script>
    <script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js'></script>
    <script type="text/javascript" src='./app.js'></script>
    <script type="text/javascript" src='./HomeController.js'></script>
    <script type="text/javascript" src='./AboutController.js'></script>
    <script type="text/javascript" src='./ContactController.js'></script>
  </head>
  <body ng-app="myAPP">
      <div>
          <div id="navigation">
              <a href="#/home">Home</a>
              <a href="#/about">About</a>
              <a href="#/contact">Contact</a>
          </div>
          <div ng-view></div>
       </div>
  </body>
</html>

app.js

'use strict';

var myAPP = angular.module('myAPP', [ 'ngRoute' ]);

myAPP.config(['$routeProvider',
    function (
        $routeProvider
    ) {
          $routeProvider.
              when('/home', {
                  templateUrl: 'pages/home.html',
                  controller: 'HomeController'
              }).
              when('/about', {
                  templateUrl: 'pages/about.html',
                  controller: 'AboutController'
              }).
              when('/contact', {
                  templateUrl: 'pages/contact.html',
                  controller: 'ContactController'
              }).
              otherwise({
                  redirectTo: '/home'
              });
}]);

HomeController.js

angular.module('myAPP')
    .controller('HomeController', function ($scope) {
       // create a message to display in our view
       $scope.message = 'Everyone come and see how good I look!';
    });

AboutController.js

angular.module('myAPP')
 .controller('AboutController', function ($scope) {
        $scope.message = 'Look! I am an about page.';
 });

ContactController.js

angular.module('myAPP')
 .controller('ContactController', function ($scope) {
        $scope.message = 'Contact us! JK. This is just a demo.';
 });

pages/About.html

<h1> About </h1>
{{message}}

pages/Contact.html

<h1> Contact </h1>
{{message}}

pages/Home.html

<h1> Home </h1>
{{message}}

Folder view:

Result: