title: How to load controller in Angular 1.6 (Argument 'simpleController' is not a function, got undefined)
body: <p>I am trying to learn AngularJS, I have <code>View1</code> which uses <code>simpleController</code>, but AngularJS (1.6) is throwing an error and I can't find the right syntax to make it work.</p>
  
  <p>My Repository is: <a href="https://github.com/tommcclean/Learning_Angular" rel="nofollow noreferrer">https://github.com/tommcclean/Learning_Angular</a>.</p>
  
  <blockquote>
    <p>Error: ng:areq. Bad Argument. Argument 'simpleController' is not a
    function, got undefined</p>
  </blockquote>
  
  <p><strong><code>View1</code> contains...</strong></p>
  
  <pre><code>&lt;div ng-controller="simpleController as ctrl"&gt;
      &lt;h2&gt;View One&lt;/h2&gt;
  
      &lt;p&gt;{{ ctrl.testValue }}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong><code>simpleController</code> contains...</strong></p>
  
  <pre><code>"use strict";
  
  (function () {
      angular.module('demoApp').controller('simpleController', []);
  
      function simpleController() {
          var self = this;
  
          self.testValue = "Test Value";
  
          self.updateValue = function () {
              self.testValue = "Test Value Updated";
          };
  
          return self;
      };
  });
  </code></pre>
  
  <p><strong><code>demoApp</code> is created by my routes.js file which is loaded first.</strong></p>
  
  <pre><code>"use strict";
  
  var app = angular.module('demoApp', ["ngRoute"]);
  
  app.config(function ($routeProvider) {
      $routeProvider
          .when('/view1',
          {
              controller: 'simpleController',
              templateUrl: '../views/view1.html'
          })
          .otherwise({ redirectTo: '/view1' });
  });
  </code></pre>
  
  <p><strong>My main page which is the home of my "spa" contains...</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Sample Demo Application&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="demoApp" class="container"&gt;
      &lt;h1&gt;Welcome to my Sample Application&lt;/h1&gt;
  
      &lt;a href="#!view1"&gt;View 1&lt;/a&gt;
  
      &lt;div ng-view&gt;&lt;/div&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="../app/initialise/routes.js"&gt;&lt;/script&gt;
      &lt;script src="../app/controllers/simpleController.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>