title: Angular Posting not sending
body: <p>This is my <strong>index.html</strong> page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;title&gt;My AngularJS App&lt;/title&gt;
    &lt;link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css"&gt;
    &lt;link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css"&gt;
    &lt;link rel="stylesheet" href="app.css"&gt;
    &lt;script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div ng-controller="HomeCtrl"&gt;
        &lt;form ng-submit="sendPost()"&gt;
          &lt;label&gt;Input id&lt;/label&gt;
          &lt;input type="text" ng-model="id" required/&gt;
          &lt;button type="submit"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
        {{response}}
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's my <strong>app.js</strong>:</p>
  
  <pre><code>'use strict';
  
  // Declare app level module which depends on views, and components
  angular.module('myApp', [])
  .controller('HomeCtrl', function($scope, $http) {
      $scope.id = "";
      $scope.response = "";
      $scope.sendPost = function() {
          var userDetails = [{"userId":"23848348", "type":"CUSTOMER"}];
          var request = {
              method: 'POST',
              url: 'http://thisisatest.testhost.com/userInfo',
              headers: {
                  'Content-Type': 'application/json',
                  'id':$scope.id
              },
              data: $.param({
                  json: JSON.stringify({
                      'code':'8388',
                      'userDetails': userDetails
                  })
              })
          }
          $http(request)
              .success(function(data, status, headers, config){
                  /*called for result &amp; error because 200 status*/
                  if (data.result) {
                      $scope.response = data.result;
                  } else if (data.error) {
                      //handle error here
                  }
              })
              .error(function(data, status, headers, config){
                  /*handle non 200 statuses*/
              });
      }
  })
  </code></pre>
  
  <p>Here's what the json request body is supposed to look like:</p>
  
  <pre><code>{
     "code":"8388",
     "userDetails": [
          {          
              "userId": "23848348",        
              "type": "CUSTOMER"
          }
     ]
  }
  </code></pre>
  
  <p>But when i input an id in the textbox and hit submit i dont see anything printed in the response area. Any idea what I did wrong here?</p>