title: AngularJS $http.post with body
body: <p>I have an application with <strong>Cordova</strong> and <strong>AngularJS</strong>. </p>
  
  <p>With Angular I send a value to my backend application (<strong>Spring REST</strong>). The method I use for this is <strong>$http.post</strong>. </p>
  
  <hr>
  
  <p><strong>The problem</strong></p>
  
  <p>When I try to send data to my server Spring won't set the values in my entity. Due to this I cannot save my new data. </p>
  
  <hr>
  
  <p><strong>Angular code</strong></p>
  
  <p>My AngularJS code is as follows:</p>
  
  <pre><code>httpService.createInBackend = function (url, data, callback, errorCallback) {
      http.post(url, data)
             .then(function (success) {
                callback(success);
             }, function (error) {
                errorCallback(error.data);
             });
  };
  </code></pre>
  
  <p>I use the following parameters: </p>
  
  <p>url: <code>http://&lt;location&gt;:&lt;port&gt;/&lt;application&gt;/&lt;web_socket_url&gt;</code></p>
  
  <p>data:</p>
  
  <pre><code>data: {
          {
          "incidentTypeId": 5,
          "priorityId": 1,
          "creationDate": 1449676871234,
          "userId": 1,
          "latitude": &lt;some valid location&gt;,
          "longitude": &lt;some valid location&gt;
          }
      },
      timeout: 4000
  }
  </code></pre>
  
  <p>I use '<strong>data</strong>' and not '<strong>params</strong>', because I want to send data via the body. I got this to work with a PUT function, that does not differ much from this function. </p>
  
  <hr>
  
  <p><strong>My REST controller</strong></p>
  
  <pre><code> @RequestMapping(value = "/employee/new", method = RequestMethod.POST)
      public NewEmployee createIncident(@RequestBody NewEmployee employee) {
  
      return employee;
  }
  </code></pre>
  
  <hr>
  
  <p><strong>My NewEmployee model</strong></p>
  
  <pre><code>private int employeeId;
  
  private int priorityId;
  
  private String information;
  
  private Date creationDate;
  
  private int userId;
  
  private float longitude;
  
  private float latitude;
  </code></pre>
  
  <hr>
  
  <p><strong>Angular result</strong></p>
  
  <p>When using the console, I get the following result from this method:</p>
  
  <p><em>I send:</em> </p>
  
  <pre><code>{
       "employeeId":5,
       "priorityId":1,
       "creationDate":1449677250732,
       "userId":1,
       "information": "hello world!",
       "latitude":&lt;some valid location&gt;,
       "longitude":&lt;some valid location&gt;
  }
  </code></pre>
  
  <p><em>I recieve:</em></p>
  
  <pre><code>{  
       employeeId: 0
       priorityId: 0
       creationDate: null
       userId: 0
       information: null
       latitude: 0
       longitude: 0   
  }
  </code></pre>
  
  <hr>
  
  <p><strong>PostMan</strong></p>
  
  <p>I tried the same thing with PostMan (<strong>Google chrome plugin</strong>) and that way my code works. Due to this I do think it is an issue with my AngularJS code. </p>
  
  <hr>
  
  <p><strong>I have tried</strong></p>
  
  <p>I have tried using the following AngularJS call:</p>
  
  <pre><code>$http({
      method: 'POST',
      url: url,
      data: data,
      timeout: 4000
  }).then(function (success) {
      callback(success);
  }, function (error) {
      errorCallback(error);
  });
  </code></pre>
  
  <p>Yet this did not change the result. Still only empty values.</p>
  
  <hr>
  
  <p><strong>Does anyone know what I am doing wrong?</strong></p>