title: AngularJS controllers causing errors
body: <p>I have a very simple application that does nothing really other than display two different views depending on user selection. This application is a stepping stone to learning how routes work in AngularJS. </p>
  
  <p>My issue is this.</p>
  
  <p>The application when run in the browser navigates to the index view with no issues. This is because the index view does not reference a controller. However the user view does reference (require) a controller. This causes an issue where the exception thrown is Arguement 'XCtrl' is not a function, got undefined.</p>
  
  <p>My main index is:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;div ng-view&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My main app.js is:</p>
  
  <pre><code>angular.module('app.controllers', []);
  
  var controllers = angular.module('app.controllers', []);
  
  angular.module('app', ['app.controllers'])
  .config(['$routeProvider', function($routeProvider) {
      $routeProvider.
          when('/', {
              templateUrl: 'views/index.html'
          })
      $routeProvider.when('/users', {
              templateUrl: 'views/users.html',
              controller: 'UserCtrl'
          }).
          otherwise({ redirectTo: '/' });
  }]); 
  </code></pre>
  
  <p>My controller is: </p>
  
  <pre><code>appControllers.controller('UserCtrl', ['$scope', function ($scope) {
      $scope.users = {
          user: {name: "Ian", age: 30 },
          user: {name: "Paul", age: 37 }
      };
  }]);
  </code></pre>
  
  <p>user.html</p>
  
  <pre><code>&lt;div ng-repeat="user in users"&gt;{{user.name}} {{ user.age }}&lt;/div&gt;
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;h1&gt;index&lt;/h1&gt;
  </code></pre>
  
  <p>can anybody see where I am going wrong. Any help would be great</p>
  
  <p>EDIT:</p>
  
  <p>Here s the stack trace from the browser, if this helps any</p>
  
  <p>Error: Argument 'UserCtrl' is not a function, got undefined
      at Error ()
      at bb (<a href="http://www.testapp.com/js/angular/angular.min.js:17:68" rel="nofollow">http://www.testapp.com/js/angular/angular.min.js:17:68</a>)
      at ra (<a href="http://www.testapp.com/js/angular/angular.min.js:17:176" rel="nofollow">http://www.testapp.com/js/angular/angular.min.js:17:176</a>)
      at <a href="http://www.testapp.com/js/angular/angular.min.js:53:60" rel="nofollow">http://www.testapp.com/js/angular/angular.min.js:53:60</a>
      at k (<a href="http://www.testapp.com/js/angular/angular.min.js:151:401" rel="nofollow">http://www.testapp.com/js/angular/angular.min.js:151:401</a>)
      at Object.e.$broadcast (<a href="http://www.testapp.com/js/angular/angular.min.js:90:517" rel="nofollow">http://www.testapp.com/js/angular/angular.min.js:90:517</a>)
      at <a href="http://www.testapp.com/js/angular/angular.min.js:83:6" rel="nofollow">http://www.testapp.com/js/angular/angular.min.js:83:6</a>
      at h (<a href="http://www.testapp.com/js/angular/angular.min.js:78:207" rel="nofollow">http://www.testapp.com/js/angular/angular.min.js:78:207</a>)
      at h (<a href="http://www.testapp.com/js/angular/angular.min.js:78:207" rel="nofollow">http://www.testapp.com/js/angular/angular.min.js:78:207</a>)
      at <a href="http://www.testapp.com/js/angular/angular.min.js:78:440" rel="nofollow">http://www.testapp.com/js/angular/angular.min.js:78:440</a> </p>
  
  <p>Also: </p>
  
  <p>www.testapp.com is a locally hosted server with no external access, just in case someone tries it and can not access.</p>