AngularJs Controller in External file and using route
<p>I have had a look through SO and nothing has helped.</p>

<p>This is my app.js</p>

<pre><code>var app = angular.module("qMainModule", ["ngRoute"])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider
        .when("/", {
            templateUrl: 'templates/anonHome/anonHome.html',
            controller: 'templates/anonHome/anonHomeController'
        })
        .when("/about", {
            templateUrl: 'templates/anonHome/anonAbout.html',
            controller: 'templates/anonHome/anonAboutController'
        })
        .when("/services", {
            templateUrl: 'templates/anonHome/anonServices.html',
            controller: '/templates/anonHome/anonServicesController'
        })
        .when("/contact", {
            templateUrl: 'templates/anonHome/anonContact.html',
            controller: '/templates/anonHome/anonContactController'
        })
        .when("/register", {
            templateUrl: 'templates/anonHome/anonRegister.html',
            controller: '/templates/anonHome/anonRegisterController'
        })
        .when("/login", {
            templateUrl: 'templates/anonHome/anonLogin.html',
            controller: '/templates/anonHome/anonLoginController'
        })

        $locationProvider.html5Mode(true);
    })



app.controller("qMainController", function ($scope) {
    $scope.Title = " Welcome to Qiao";
    $scope.qNavigationTemplatePath = "/templates/topMenu/anonTopNavigation.html";
    $scope.copyrightMessage = "Qiao ";
    $scope.copyrightYear = new Date();
});
</code></pre>

<p>The routing works as expected and the partial templates are being shown but the partial templates controllers are not being recognised as a function.</p>

<p>The Layout Template looks like this</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="qMainModule"&gt;
&lt;head ng-controller="qMainController"&gt;
    &lt;base href="/" /&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="author" content=""&gt;
    &lt;title&gt;Qiao :: {{Title}}&lt;/title&gt;

    &lt;!-- Bootstrap Core CSS --&gt;
    &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
     &lt;link href="../css/modern-business.css" rel="stylesheet" /&gt;
   &lt;!-- Custom Fonts --&gt;
    &lt;link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;

    &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
    &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
    &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;


    &lt;script src="/scripts/angular.js"&gt;&lt;/script&gt;
    &lt;script src="../scripts/angular-route.js"&gt;&lt;/script&gt;
    &lt;script src="/app/app.js"&gt;&lt;/script&gt;
    &lt;script src="templates/anonHome/anonHomeController.js"&gt;&lt;/script&gt;



  &lt;!--  &lt;link href="../styles/qiao.css" rel="stylesheet" /&gt; --&gt;


&lt;/head&gt;
&lt;body ng-controller="qMainController"&gt;
    &lt;div ng-include="qNavigationTemplatePath"&gt;

    &lt;/div&gt;

     &lt;!-- Page Content --&gt;
    &lt;div class="container"&gt;
        &lt;ng-view&gt;&lt;/ng-view&gt;
    &lt;/div&gt;

    &lt;!-- Footer --&gt;
    &lt;footer&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-lg-12" ng-controller="qMainController"&gt;
                Copyright &amp;copy; {{copyrightMessage}} {{copyrightYear | date:'yyyy'}}
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/footer&gt;

    &lt;div &gt;
        &lt;!-- jQuery --&gt;
        &lt;script src="js/jquery.js"&gt;&lt;/script&gt;

        &lt;!-- Bootstrap Core JavaScript --&gt;
        &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;

        &lt;!-- Script to Activate the Carousel --&gt;
        &lt;script&gt;
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
        &lt;/script&gt;

    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The partial template looks like this:</p>

<pre><code>&lt;script src="anonHomeController.js"&gt;&lt;/script&gt;

&lt;div ng-controller="anonHomeController"&gt;

    &lt;h1&gt;{{Title}}&lt;/h1&gt;

&lt;/div&gt;
</code></pre>

<p>and its controller is this</p>

<pre><code>function anonHomeController($scope) {
    $scope.Title = " Welcome to Qiao";
    $scope.qNavigationTemplatePath = "/templates/topMenu/anonTopNavigation.html";
    $scope.copyrightMessage = "Qiao ";
    $scope.copyrightYear = new Date();
};
</code></pre>

<p><strong>The Question: How do I get Angular to recognise and use the partial template's controller?</strong></p>