Send Object as Parameter from View to Asp.net Controller with AngularJS -

i'm trying pass category object parameter of subcategory object asp.net controller. .net controller sets subcategory.supercategory object null.

subcategoryobject:

public class subcategory {     [key]     [databasegenerated(databasegeneratedoption.identity)]     public int id { get; set; }     public string name { get; set; }     [required]     public category supercategory { get; set; } } 

here asp.net controller:

 public void createsubcategory([frombody]subcategory subcategory)     {         system.diagnostics.debug.writeline("supercategoryname: " + subcategory.supercategory.name);     } 

this angularjs function:

$scope.savedatasubcategory = function (subcategory) {     $http.post('/aaangular/createsubcategory', { name: subcategory.name, supercategory: {id: subcategory.supercategory.id, name: subcategory.supercategory.name } })     .then(function successcallback(response) {         console.log(response);     }     , function errorcallback(response) {         console.log(response);     }) } 

and parts of view:

     <input type="text" class="form-control" data-ng-model="subcategory.name">      <select data-ng-model="subcategory.supercategory">           <option ng-repeat="category in categories">{{category}}</option>      </select>      <input type="button" value="save" data-ng-click="savedatasubcategory(subcategory)"/>  

categories loaded correctly, {{subcategory.supercategory}}:

{"id":63,"name":"testcat"}  

and {{subcategory}} displayed as:

 {"supercategory":"{\"id\":63,\"name\":\"testcat\"}"} 

and think here lies problem, can't read because of backslashes. when i'm trying pass 1 variable of category, works, need whole object.
how subcategory looks when try pass name of category.

{"supercategory":{"name":"testcat"}} 

first of need construct object of subcategory wish pass.

 var subcategory = {};  subcategory.name = subcategory.name;  subcategory.supercategory = {} //this nested object  subcategory.supercategory.id = <assign whatever>  ... likewise fill other properties 

once done need make couple of correction on posting method this.

    $http({           url: "route/createsubcategory",  //change correct 1         datatype: 'json',           method: 'post',           data: subcategory,           headers: { "content-type": "application/json" }        }).success(function (response) {           console.log(response);       })        .error(function (error) {             alert(error);        });   

on web api side should like

    [route("createsubcategory")]       [httppost]       public string createsubcategory([frombody] subcategory subcategory)       {           return "output";       } 

just note return type in case it's void should not be.either return appropriate viewmodel or string based on need.also have decorated method httppost attribute.

hope helps.