title: HTTP Post failure with angular
body: <p>I am new to angular.js and am unable to get a simple POST request to work.  I am using angular version 1.4.8.  My request never makes it to the server.  Instead, it appears the client errors out before making the request.  I can't see what I'm doing wrong, even though I've read the documentation here: <a href="https://docs.angularjs.org/api/ng/service/" rel="nofollow">https://docs.angularjs.org/api/ng/service/</a>$http#post.  Here is the relevant error info I have (produced with the code example below):</p>
  
  <p>{
      "data": null,
      "status": -1,
      "config": {
        "method": "POST",
        "transformRequest": [
          null
        ],
        "transformResponse": [
          null
        ],
        "url": "<a href="http://localhost:4567/foo" rel="nofollow">http://localhost:4567/foo</a>",
        "data": {
          "foo": "bar"
        },
        "headers": {
          "Accept": "application/json, text/plain, <em>/</em>",
          "Content-Type": "application/json;charset=utf-8"
        }
      },
      "statusText": ""
    }   </p>
  
  <p>And here is my code example.  It reproduces the problem in both firefox and chrome, so this doesn't seem to be a browser quirk.  Since I'm an angular newbie, this is likely something basic (but not obvious to me).  Help appreciated ;)</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en-US"&gt;
  
  &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script&gt;
      var app = angular.module('myApp', []);
      app.controller('customersCtrl', function ($scope, $http) {
  
          $scope.httpPost = function (postBody) {
              var successCallback = function (data, status, headers, config) {
                  alert("post success");
              };
  
              var errorCallback = function (data, status, headers, config) {
                  var responseJson = angular.toJson(data);
                  $scope.theError = responseJson;
              };
  
              $http.post('http://localhost:4567/foo', postBody).then(successCallback, errorCallback);
  
          };
  
          var postBody = {"foo" : "bar"};
          $scope.httpPost(postBody);
      });
  &lt;/script&gt;
  
  &lt;div data-ng-app="myApp" data-ng-controller="customersCtrl"&gt;
      &lt;pre&gt;{{theError}}&lt;/pre&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>