Pass data using http post in angularjs and Asp .Net Web Api

Question

I am trying to use post method of Web API from angularjs code but the data that I am sending from $http is not reaching to Web API method. The planDetailsVM parameter remains null. Below is my code-

Web API Controller code-

public class RateCalculationController : ApiController
{

    [HttpPost]
    public RateCalcOutParmDTO GetPlanRateCalculation(PlanDetailsVM planDetailsVM) 
    {
        //planDetailsVM remains null

        RateCalcOutParmDTO rateCalcOutParmDTO = new RateCalcOutParmDTO();

        // Some operation here

        return rateCalcOutParmDTO;
    }
}

Here planDetailsVM remains null.

AngularJs Code-

 $http({
    url: key_Url_GetPlanRateCalculation,
    method: 'Post',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    params: $scope.PlanDetails
    }).then(function (result) {
        //Some operation here
   });

Route mapping code-

  public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{action}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );
        var appXmlType = config.Formatters.XmlFormatter.SupportedMediaTypes.FirstOrDefault(t => t.MediaType == "application/xml");
        config.Formatters.XmlFormatter.SupportedMediaTypes.Remove(appXmlType);
    }

I tried to follow one of the solution at this link AngularJs $http.post() does not send data but it's not working for me. What can I need to do so that planDetailsVM receives the posted data from AngularJS http post?

PlanDetails data-

 $scope.PlanDetails = { QuoteName: null, BenefitAmountId: 0, BenefitAmountValue: null, DoD_Id: 0, DoD_Value: null, EPBD_Id: null, EPBD_Value: null, _DisplayMsg: null, _DisplayFlag: false };

Answer 1

I was able to solve this issue by just replacing key "params:" with "data:" in the https post request as suggested by Ben. Below is the angularJS code that did the work-

$http({
url: key_Url_GetPlanRateCalculation,
method: 'Post',
data: $scope.PlanDetails
}).then(function (result) {
    //Some operation here
});