title: Post a model from angularJS to WEBAPI
body: <p>It maybe a dumb question, but I can't get it right. I've searched all on stackoverflow questions, and google of course.</p>
  
  <p>So, I got this class on my webapi</p>
  
  <pre><code>public partial class TaskList
  {
      public int id { get; set; }
      public string task { get; set; }
  }
  </code></pre>
  
  <p>Then my webapi controller</p>
  
  <pre><code>[HttpPost]
  public HttpResponseMessage Post([FromBody] TaskList tasklistModel)
  {
      return Request.CreateResponse(HttpStatusCode.OK, tasklistModel);
  }
  </code></pre>
  
  <p>My angularJS controller</p>
  
  <pre><code>angular.module('ReminderDude.controllers', [])
  
  .controller('HomeController', function($scope, dudeService) {
      $scope.CreateNewTask = function(tasklistModel){
          tasklistModel.id = '1';
  
          dudeService.store({
              data: JSON.stringify(tasklistModel)
          }).then(function(resp) {
              console.log(resp);
           },function(err) {
              console.error('Controller: Error', err);
          });
      }
  })
  </code></pre>
  
  <p>My angularJS service</p>
  
  <pre><code>angular.module('ReminderDude.services', [])
  
  .factory('dudeService', function($http) {
      var baseUrl = 'http://localhost:1142/api/values';
      return {
          store: function (tasklistModel){
              return $http({  
                          url: baseUrl,
                          method: 'POST',  
                          data: tasklistModel,  
                          headers: {  
                              "Content-Type": "application/json"  
                          }  
                      });
          }
      };
  })
  </code></pre>
  
  <p>And lastly, the HTML</p>
  
  <pre><code>&lt;ion-view view-title="Reminder Dude"&gt;
      &lt;ion-content class="padding"&gt;
          &lt;form ng-Submit="CreateNewTask(model)"&gt;
              &lt;div class="list card"&gt;
                  &lt;div class="item item-divider"&gt;Hello! Please input your task below&lt;/div&gt;
                  &lt;div class="item item-input"&gt;
                      &lt;input type="text" ng-model="model.task" placeholder="Write Here" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;center&gt;
                  &lt;button type="submit" class="button button-positive button-large"&gt;Save&lt;/button&gt;
              &lt;/center&gt;
          &lt;/form&gt;
      &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>I made a breakpoint on my webapi controller, it hits but the model i passed on is null. Here's the returned data from my webapi controller:</p>
  
  <pre><code>Object {data: Object, status: 200, config: Object, statusText: "OK"}
  config: Object    
  data: Object       
  headers: Object    
  method: "POST"    
  transformRequest: Array[1]
  transformResponse : Array[1]
  url : "http://localhost:1142/api/values"
  __proto__ :
      Object: data
      Object:
          id: 0
          task: null
  __proto__ :
      Object
      headers: function(name)
      status: 200
      statusText: "OK"
  __proto__ :
      Object
  </code></pre>
  
  <p>Here's the list of what i've tried:</p>
  
  <ul>
  <li>use or remove the [FromBody] tag on my webapi controller</li>
  <li>use or remove JSON.stringify on my angularJS controller before sending my data to webapi controller</li>
  <li>change the "public HttpResponseMessage Post" to "public TaskList Post"</li>
  <li>console.log the data sent from my angularJS controller: {"task":"testTask","id":"1"}</li>
  </ul>
  
  <p>Why it doesn't send correctly to my webapi?
  Any answers and helps would be appreciated.</p>
  
  <p>FYI: CORS is not a problem in my opinion, i've enabled it. Because if the CORS isn't enabled, it won't hit the breakpoint wouldn't it? If it's a CORS related problem, please correct me.</p>
  
  <p>Thank you</p>
  
  <p>UPDATE:</p>
  
  <p>After a quite long discussion with @Mahesh Chand, i've successfully send the data to my webapi controller. here's what i've done:</p>
  
  <p>change the angularjs controller to this:</p>
  
  <pre><code>angular.module('ReminderDude.controllers', [])
  
  .controller('HomeController', function($scope, dudeService) {   
      $scope.CreateNewTask = function(tasklistModel){
          tasklistModel.id = 1;
  
          //before
          dudeService.store({
              data: tasklistModel
          }).then(function(resp) {
          console.log('response from api:'))
          console.log(resp);
  
          //after
          dudeService.store(tasklistModel).then(function(resp) {
              console.log('response from api:');
              console.log(resp);
              //ignore the console.log, it just my code to test the response from the api
  </code></pre>
  
  <p>Big thanks to @Mahesh Chand, thanks for noticing the 'data' that was unnecessary one. (that was a hell of dumb mistake)</p>
  
  <p>Note for @Mahesh Chand: in my case, we really need the ng-model instead of ng-bind. if i use ng-bind, i won't get the value that i passed on from the view.</p>
  
  <p>Hope this will help the others that have the same problem as me.</p>