title: AngularJS + ASP.NET MVC - Controller undefined
body: <p>Hullo everyone, I am having a problem with AngularJs not reconizing my controller, I have summarised what I have done below.</p>
  
  <p>Starting point: AngularJs tutorial <a href="http://www.thinkster.io/angularjs/ZPCQtVfGba/angularjs-controllers" rel="nofollow noreferrer">http://www.thinkster.io/angularjs/ZPCQtVfGba/angularjs-controllers</a></p>
  
  <p>Problem:
  defined controller in file (gets retrieved correctly when visiting page), added ng-controller directive to relevant div, got javascript runtime error ( </p>
  
  <p><strong>Error: [ng:areq] <a href="http://errors.angularjs.org/1.3.0-beta.18/ng/areq?p0=FirstCtrl&amp;p1=not%20a%20function%2C%20got%20undefined" rel="nofollow noreferrer">http://errors.angularjs.org/1.3.0-beta.18/ng/areq?p0=FirstCtrl&amp;p1=not%20a%20function%2C%20got%20undefined</a></strong></p>
  
  <p>)</p>
  
  <p>Before posting I checked whether I had included my controller implementation before including Angular but it is not the case.</p>
  
  <p>What am I missing? I suspect it might have something to do with declaring controllers in the global scope (e.g. <a href="https://stackoverflow.com/questions/25111831/controller-not-a-function-got-undefined-while-defining-controllers-globally">Controller not a function, got undefined, while defining controllers globally</a>) but I am not really sure whether this is indeed the case.</p>
  
  <h2>Thanks in advance!</h2>
  
  <p>_Layout .cshtml</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;@ViewBag.Title - My ASP.NET Application&lt;/title&gt;
      @RenderSection("PageSpecificStyles",required:false)
  &lt;/head&gt;
  &lt;body&gt;
  
      @RenderBody()
  
  
      @RenderSection("BodyScripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Index.cshtml:</p>
  
  <pre><code>@{
      ViewBag.Title = "Home Page";
  }
  
  @section PageSpecificStyles{
      &lt;style&gt;
          div {
              margin-left: 20%;
          }
      &lt;/style&gt;
  }
  
  @section BodyScripts{
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/FirstCtrl.js"&gt;&lt;/script&gt;
  }
  &lt;div ng-controller="FirstCtrl"&gt;
  
      &lt;div&gt;
          &lt;h1&gt;Hello {{data.message}}&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>FirstCtrl.js (in ~/scripts)</p>
  
  <pre><code>function FirstCtrl($scope) {
      $scope.data = { message: "Cat!" };
  }
  </code></pre>