title: HTTP Get request from Angular JS receives empty reply
body: <p>Since I am fairly new to web development, this might very well be a very easy to solve question. Unfortunately I am not able to solve this myself as I have no clue on where to search.</p>
  
  <p>Currently I'm trying to get data out of an ASP.NET Web API that is running on my local machine. To get this data I've written a small piece of JavaScript using AngularJS:</p>
  
  <pre class="lang-js prettyprint-override"><code>function MainController($scope, $http) {
    $http.get("http://localhost/DBLayerDLL/api/tablets/1005").
      then(function(response) {$scope.data=response;},
           function(response){$scope.data=response;});
  }
  </code></pre>
  
  <p>The HTML page that is used, is also very simple:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app&gt;
  
    &lt;head&gt;
      &lt;script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/main.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="MainController"&gt;
      &lt;h1&gt;Hello World!&lt;/h1&gt;
      &lt;div&gt;
        &lt;div&gt;Data: {{data}}&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The action of the controller in my Web API is implemented as follows:</p>
  
  <pre class="lang-cs prettyprint-override"><code>[RoutePrefix("api/tablets")]
  public class TabletsController : ApiController
  {
      [Route("{ID}")]
      [HttpGet]
      public TabletRecord GetTablet(int ID)
      {
          TabletRecord tablet = new TabletRecord();
          tablet.LoadFromID(ID);
          return tablet;
      }
  }
  </code></pre>
  
  <p>The problem lies within the response I get from the HTTP request. When printed on the page it looks like this:</p>
  
  <pre><code>{"data":"","status":0,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"http://localhost/DBLayerDLL/api/tablets/1005","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""}
  </code></pre>
  
  <p>Which is not correct, as I know that my API will return data. It gets even weirder for me when I use Fiddler to see what is going on. Within Fiddler I can see the request and see that the response is completely different from what I see on my web page:</p>
  
  <p><img src="https://i.stack.imgur.com/5DAmT.png" alt="Fiddler HTTP request"></p>
  
  <p>Due to my lack of knowledge and experience I don't know what is going on...</p>
  
  <ul>
  <li>Is there any thing I am doing wrong in my JavaScript?</li>
  <li>Should I do something else within the HTML page?</li>
  <li>Or is there any special thing that I need in my Web API?</li>
  </ul>
  
  <p>Any help or thoughts are highly appreciated!</p>