I am trying to write an AngularJS resource module that will post some data to the server. The default content-type appears to be application/xml. I am trying to override the content-type to application/x-www-form-urlencoded. When doing a normal $http.post() I can set the content-type and when I check in Firebug, I can see it set correctly. When I use the resource's POST method, I cannot get the content-type to be changed from the default. I think that I am doing it according to how the documentation describes.

http://jsfiddle.net/vBsUH/3/

var myApp = angular.module('myApp',['myResource']);



angular.module('myResource', ['ngResource']).factory('myResource', function($resource){

   return $resource('/echo/json',{},{

      add:{ method:'POST', params:{ foo:'1' }, headers:{'Content-Type':'application/x-www-form-urlencoded'} }

   });

});



function MyCtrl($scope,$http,myResource) {

   $scope.click = function() {



      //This will make an ajax call with a content-type of application/xml    

      myResource.add();



      //this will make an ajax call with a content-type of application/x-www-form-urlencoded

      $http.post('/echo/json','foo=1',{'headers':{'Content-Type':'application/x-www-form-urlencoded'}});



   }

}​

Any ideas or examples on how to get an AngularJS resource to post with a different content-type would be much appreciated.