title: AngularJS: Register Controller from separate .js file
body: <p>I am new to AngularJS and using plnkr.co to learn how to use angular. I have having some difficulty registering a Controller this is stored in a separate .js from where the module is initialized. Can anybody tell me why the below does not work?</p>
  
  <p>index.html file
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="plunker"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;AngularJS Plunker&lt;/title&gt;
    &lt;script&gt;
      document.write('&lt;base href="' + document.location + '" /&gt;');
    &lt;/script&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-semver="1.4.6"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;script scr="mainCtrl.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="MainCtrl"&gt;
    &lt;p&gt;Hello {{name}}!&lt;/p&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>app.js File</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('plunker', []);</code></pre>
  </div>
  </div>
  </p>
  
  <p>mainCtrl.js File</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('plunker')
    .controller('MainCtrl', ['$scope', function($scope) {
      $scope.name = 'GitHub';
    }]);</code></pre>
  </div>
  </div>
  </p>
  
  <p>For me, this produces an Argument 'MainCtrl' is not a function, got undefined.</p>