title: One route works but not other two (using AngularJS and RouteProvider)
body: <p>AngularJS v1.7.4 </p>
  
  <p>I am new to AngularJS and creating a simple app but not sure why one route works (shows the static html from a partial file as well as <code>{{message}}</code> correctly), but the other two routes only show static html and not <code>{{message}}</code> which is being set using <code>$scope.message</code>. </p>
  
  <p>Additionally errors such as </p>
  
  <blockquote>
    <p>The controller with the name 'ContactController' is not registered.</p>
  </blockquote>
  
  <p>and </p>
  
  <blockquote>
    <p>The controller with the name 'AboutController' is not registered.</p>
  </blockquote>
  
  <p>Are seen in the console when trying to go to 'Contact' and 'About' pages respectively.</p>
  
  <p>For the three routes I have three html files and three controller files. I have made sure to include <code>&lt;body ng-app="gmsApp"&gt;</code>. </p>
  
  <p>Files are being loaded as </p>
  
  
  
  <pre><code>&lt;script src="./js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="./js/angular.js"&gt;&lt;/script&gt;
  &lt;script src="./js/angular-route.js"&gt;&lt;/script&gt;
  
  &lt;script src="./js/controllers/about.controller.js"&gt;&lt;/script&gt;
  &lt;script src="./js/controllers/contact.controller.js"&gt;&lt;/script&gt;
  &lt;script src="./js/controllers/home.controller.js"&gt;&lt;/script&gt;
  
  &lt;link href="./css/bootstrap.min.css" rel="stylesheet" /&gt;`
  </code></pre>
  
  <p>Following advise from other posts I am using the 'regular' js files and not 'minified' versions of angular and angular-route.</p>
  
  <p>The code in main html file is: </p>
  
  <pre><code>    var app = angular.module("gmsApp", ['ngRoute', 'gmsApp.controllers']);
  
      app.config(['$routeProvider', function($routeProvider) {
          $routeProvider.
          when('/home', {
              templateUrl: 'partials/home.html',
              controller: 'HomeController'
          }).
          when('/about', {
              templateUrl: 'partials/about.html',
              controller: 'AboutController'
          }).
          when('/contact', {
              templateUrl: 'partials/contact.html',
              controller: 'ContactController'
          }).
          otherwise({
              redirectTo: '/home'
          });
      }]);
  </code></pre>
  
  <p>/js/controllers/home.controller.js</p>
  
  <pre><code>angular.module('gmsApp.controllers', [])
  .controller('HomeController', function ($scope) {
      $scope.message = 'Main page of the app';
  });
  </code></pre>
  
  <p>/js/controllers/about.controller.js</p>
  
  <pre><code>angular.module('gmsApp.controllers', [])
  .controller('AboutController', function ($scope) {
      $scope.message = 'This is about us page';
  });
  </code></pre>
  
  <p>/js/controllers/contact.controller.js</p>
  
  <pre><code>angular.module('gmsApp.controllers', [])
  .controller('ContactController', function ($scope) {
      $scope.message = 'Contact Us page ...';
  });
  </code></pre>
  
  <p>/partials/home.html</p>
  
  <pre><code>&lt;div ng-controller="HomeController"&gt;
      &lt;h3&gt;Home page&lt;/h3&gt;
      &lt;p&gt;{{message}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>/partials/about.html</p>
  
  <pre><code>&lt;div ng-controller="AboutController"&gt;
      &lt;h3&gt;About Us&lt;/h3&gt;
      &lt;p&gt;{{message}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>/partials/contact.html</p>
  
  <pre><code>&lt;div ng-controller="ContactController"&gt;
      &lt;h3&gt;Contact Us&lt;/h3&gt;
      &lt;p&gt;{{message}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>