Why Angular AJAX request is visible twice in chrome network tab

Question

I just noticed that when I made Angular (1.4.8) AJAX POST request it is visible twice in chrome network tab (first (355B) as angular.js:10765 and second (812B) as other where first looks like request and second as response - only second contains response data). I made identical request by use of jQuery and it's appearing as a single request (812B).

CODE:

return function ( id ) {
  var deferred = $q.defer()
    , data = {
      id: id || null,
      range: tbDateRange.get( true )
    }
    ;

  /* TODO - REMOVE */
  $.ajax({
    method: 'POST',
    url: path,
    dataType: 'JSON',
    data: data
  });

  $http.post( path, data )
    .success( function ( data ) {
      /*...*/
      deferred.resolve( data );
    } )
    .error( function ( error ) {
      /*...*/
    } );
  return deferred.promise;
};

And network tab screenshot:

Answer 1

Angular defaults to POSTing JSON formatted data instead of form encoded data (jQuery does not so the statement I made identical request by use of jQuery is incorrect).

Cross-origin, JSON formatted, POST requests require a preflight OPTIONS request.

Presumably (because you haven't show any details of the requests besides the end of the URL they are going to), the first of those requests is that preflight OPTIONS request.