title: Unable to run Angular Service
body: <p>I'm trying to follow an example from <a href="https://www.linkedin.com/pulse/http-post-get-web-api-calls-using-angularjs-suresh-muttagi" rel="nofollow">LinkedIn</a> but having the following problems:
  1. I try to call localhost:portname/Values/GetStates but instead of loading the page it asks me to download the json file.
  2. When I used F12, it didn't show me Angular and other references I added to my project, can't understand why is it so?
  I tried including references at the top of the page like this:</p>
  
  <pre><code>&lt;script src="~/Scripts/angular.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/Controllers/AngularController.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/Services/AngularService.js"&gt;&lt;/script&gt;
  &lt;link href="~/Content/bootstrap.css" rel="stylesheet" /&gt;
  </code></pre>
  
  <p>and using:</p>
  
  <pre><code>  bundles.Add(new ScriptBundle("~/Scripts/angularscripts").Include(
              "~/Scripts/angular.js",
              "~/Scripts/AngularController.js",
              "~/Scripts/AngularService.js"));
  </code></pre>
  
  <p>and then including the bundle reference like this:</p>
  
  <pre><code>@section Scripts
  {
      @Scripts.Render("~/Scripts/angularscripts")
  
  }
  </code></pre>
  
  <p>but didn't work either.</p>
  
  <p>My code is simple:</p>
  
  <pre><code> public class ValuesController : ApiController
  {
      [HttpGet]
      public string GetStates()
      {
          List&lt;States&gt; states = new List&lt;States&gt;();
          var state = new States();
  
          state.Id = 1;
          state.Name = "NSW";
          states.Add(state);
  
          state.Id = 2;
          state.Name = "QLD";
          states.Add(state);
  
          state.Id = 3;
          state.Name = "VIC";
          states.Add(state);
  
          state.Id = 4;
          state.Name = "WA";
          states.Add(state);
  
          var result = JsonConvert.SerializeObject(states);
          return result;
      }
  
      [HttpPost]
      public string GetResult(States state)
      {
          var result = "State name is " + state.Name;
          result = JsonConvert.SerializeObject(result);
          return result;
  
      }
  
  }
  </code></pre>
  
  <p>and Angular code is:
  AngularService.js</p>
  
  <pre><code>AngularModule.service('ApiCall', ['$http', function ($http) {
  var result;
  
  this.GetApiCall = function (controllerName, methodName) {
      result = $http.get('api/' + controllerName + '/' + methodName).success(function (data, status) {
          result = (data);
      }).error(function () {
          alert("Some problem in calling the service");
      });
      return result;
  };
  
  this.PostApiCall = function (controllerName, methodName, obj) {
      $http.post('api/' + controllerName + '/' + methodName).success(function (data, status) {
          result = (data);
      }).error(function () {
          alert("Some problem in calling the service");
      });
      return result;
  };
  </code></pre>
  
  <p>}]);</p>
  
  <p>AngularController.js</p>
  
  <pre><code>var AngularModule = angular.module('App', []);
  
  AngularModule.controller('AppController', function ($scope, $http, ApiCall)     {
      $scope.message = "This is a test";
      alert('App Controller');
  
      var result = ApiCall.GetApiCall("Values", "GetStates").success(function (data) {
          alert('data');
          var result = $.parseJSON(JSON.parse(data));
          $scope.StateList = result;
      });
  
      $scope.btnPostCall = function () {
          var obj = {
              'Name': 'NSW'
          };
  
          var result = ApiCall.PostApiCall("Values", "GetResult", obj).success(function (data) {
              var result = $.parseJSON(JSON.parse(data));
              $scope.message = result;
          });
  
      }
  
  });
  </code></pre>
  
  <p>AngularService.js</p>
  
  <pre><code>AngularModule.service('ApiCall', ['$http', function ($http) {
  var result;
  
  this.GetApiCall = function (controllerName, methodName) {
      result = $http.get('api/' + controllerName + '/' + methodName).success(function (data, status) {
          result = (data);
      }).error(function () {
          alert("Some problem in calling the service");
      });
      return result;
  };
  
  this.PostApiCall = function (controllerName, methodName, obj) {
      $http.post('api/' + controllerName + '/' + methodName).success(function (data, status) {
          result = (data);
      }).error(function () {
          alert("Some problem in calling the service");
      });
      return result;
  };
  </code></pre>
  
  <p>}]);</p>
  
  <p>I run this project by appending 'api/values/getstates' to localhost. 
  Any ideas ???</p>
  
  <pre><code>    }
  }
  </code></pre>