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

I'm trying to pass a category object as parameter of my subcategory object to my Asp.net controller. But the .net controller always sets my subcategory.SuperCategory object to null.

This is my 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 my Asp.net controller:

 public void createSubCategory([FromBody]SubCategory subcategory)
    {
        System.Diagnostics.Debug.WriteLine("SuperCategoryName: " + subcategory.SuperCategory.Name);
    }

This is my 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 my 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 are loaded correctly, this is {{subcategory.SuperCategory}}:

{"Id":63,"Name":"TestCat"} 

And {{subcategory}} is displayed as:

 {"SuperCategory":"{\"Id\":63,\"Name\":\"TestCat\"}"}

And I think here lies the problem, it can't read this because of the backslashes. When I'm only trying to pass one variable of category, it works, but i need the whole object.
This is how my subcategory looks when I only try to pass the name of category.

{"SuperCategory":{"Name":"TestCat"}}