title: Angular Controller Not loading : Error: [ng:areq] Argument Controller is not a function, got undefined
body: <p>angular.js:13540 Error: [ng:areq] Argument 'PropertiesCtrl' is not a function, got undefined</p>
  
  <p>I keep getting my controller isn't not a function and I can't determine why. If I copy the code from the propertiesCtrl.js and paste it in the app.js it works. But I can't seem to get it to work via a seperate file.</p>
  
  <p>Thank you for your help in advance. Sorry for the newb question.</p>
  
  <pre><code>File Structure
  Property Manager
  -app
  --properties
  ---propertiesCtrl.js
  -css
  -img
  -js
  --app.js
  --libs
  ---(angular, UI, other vendor files(
  -server.js
  -views
  --main.html
  --about.html
  -index.html
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!-- Angular and Controllers --&gt;
  &lt;script src="/js/libs/angular.js"&gt;&lt;/script&gt;
  &lt;script src="/js/libs/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"&gt;&lt;/script&gt;
  &lt;script src="/js/app.js"&gt;&lt;/script&gt;
  &lt;script src="app/properties/propertiesCtrl.js"&gt;&lt;/script&gt;
  
  &lt;span ng-controller="PropertiesCtrl as props"&gt;{{ props.name }}&lt;/span&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>angular.module('app', ['ui.router']);
  
  //configure our routes
  angular.module('app').config(function ($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
  
     var mainState = {
         name: 'main',
         url: '/',
         templateUrl: 'views/main.html'
     };
  
  
  $stateProvider.state(mainState);
  });
  </code></pre>
  
  <p>propertiesCtrl.js</p>
  
  <pre><code>function propertiesCtrl() {
     this.name = 'Properties 1';
  }
  
  angular.module('app').controller('PropertiesCtrl', propertiesCtrl);
  </code></pre>
  
  <p>New Error</p>
  
  <p><a href="https://i.stack.imgur.com/1tccv.png" rel="nofollow noreferrer">New Error</a></p>