title: Simple AngularJS, AJAX, and ASP.NET MVC example
body: <p>I would like to see an extremely minimalistic example of AngularJS making an AJAX call to an ASP.NET MVC action method. I have tried to do this myself with no success. Here is my example code...</p>
  
  <p>The MVC action method...</p>
  
  <pre><code>public string Color()
  {
      return "red";
  }
  </code></pre>
  
  <p>The HTML...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;    
  &lt;html ng-app ="ColorApp"&gt;
  &lt;head&gt;
      &lt;title&gt;ColorApp&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-controller="ColorController"&gt;
          {{color}}
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The JavaScript...</p>
  
  <pre><code>var colorApp = angular.module('ColorApp', []);
  
  colorApp.controller('ColorController', function ($scope) {
  
      $http({
          url: '/home/color',
          method: 'GET'
      }).success(function (data, status, headers, config) {
          $scope.color = data;
      });
  
  });
  </code></pre>
  
  <p>Some things to consider:</p>
  
  <ul>
  <li>If I replace the <code>$http</code> method with something like <code>$scope.color = 'purple';</code> then my view renders the word "purple" as expected. </li>
  <li>If I leave everything as is but replace the AngularJS with jQuery, everything works as expected (I get "red").</li>
  <li>I tried changing <code>{{color}}</code> to <code>{{color()}}</code> but it made no difference.</li>
  <li>I tried changing the action method to a <code>JsonResult</code> and returning <code>Json("red", JsonRequestBehavior.AllowGet);</code> but this made no difference either.</li>
  </ul>
  
  <p>I appreciate your help!</p>