How to create different folders for different controllers?

Below is the code for a module of scotchApp, and I have created differnet controllers within this page app.js. I want to create different folder for both controllers and their html files so that it makes easy for me to go through different controllers easily. I tried doing by following this https://github.com/angular/angular-seed/ but when I try to use different folder for a controller, I get an error which says something like this: Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=scotchApp&p1=%5B%24injector%3Amodulerr (long link)

'use strict'
var scotchApp = angular.module('scotchApp', ['ngRoute']);
scotchApp.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'mainController'
        })
        .when('/cis300', {
            templateUrl: 'views/cis300.html',
            controller: 'cis300Controller'
        })
        .when('/cis400', {
            templateUrl: 'views/cis400.html',
            controller: 'cis400Controller'
        })
        .when('/home', {
            templateUrl: 'views/home.html',
            controller: 'homeController'

        })
        .when('/login', {
            templateUrl: 'views/login.html',
            controller: 'loginController'
        });
});
scotchApp.controller('mainController', function ($scope) {
    $scope.message = 'Welcome to the CIS Course Enrollment Center!';
});
scotchApp.controller('cis300Controller', function ($scope) {
    $scope.message = 'This is a the CIS-300 Section.';
});
scotchApp.controller('homeController', function ($scope) {
    $scope.message = 'You have successfully logged in!';
});

scotchApp.controller('cis400Controller', function ($scope) {
    $scope.message = 'This is the CIS-400 Page';
});

Solution

Did you add all your js files with correct path and correct order in index.html i.e. main html file. if yes, please share your index.html file and folder structure to better understand the issue.

Edit -

cis300.js --

 scotchApp.controller('cis300Controller', function($scope){
     $scope.message = 'This is a the CIS-300 Section.';
 });

cis400.js --

 scotchApp.controller('cis400Controller', function($scope){
     $scope.message = 'This is the CIS-400 Page';
  });

app.js -- Please update all your html paths with correct path. For e.g. path for cis300.html if "views/cis300/cis300.htm" but in your code you have mentioned it as "views/cis300.html". Also, add the header.png in your css/images folder.

Let me know if you face any other issue.