Angular forwarding NULL data

Question

I already checked here on this link

Request problem with jQuery ($. ajax) and Angular ($http)

however I am not consequent sending in json format my data of a form in html , dry error

Possibly unhandled rejection: {"data":"","status":406,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","dataType":"json","data":{"name":"we","price":"12"},"headers":{"Content-Type":"application/json;odata=verbose","Accept":"application/json, text/Plain, /","Authorization":"Basic Mtizojeymw=="},"url":"http://localhost:9000/product","params":{"name":"name","price":"price"}},"statusText":""}

API code

@RestController
@RequestMapping(value="/product", 
produces = {"application/x-www-form-urlencoded"})
public class Products_Controller {

    @Autowired
    private Products_Repo prodrepo;

    @GetMapping(produces = "application/json")
    public @ResponseBody Iterable<Products> ListaProduct() {
        Iterable<Products> ListaProduct = prodrepo.findAll();
        return ListaProduct; 
        //retornando lista de produtos em formato json
    }
    @CrossOrigin
    @PostMapping()
    public @ResponseBody Products CadastrarProduct(Products products) {
        return prodrepo.save(products);

    }

Controller and Factory:

angular
.module("app")
.controller("ProdutosController", function($scope, ProdutosFactory){

      $scope.product = ProdutosFactory.ObterProd.todos();

      $scope.IncluirProd = function(){
        ProdutosFactory.IncluirProd.procProd({name:$scope.name, price:$scope.price});
        $scope.product = ProdutosFactory.ObterProd.todos();
      };
      $scope.NovoProd = function(){
            ProdutosFactory.NovoProd.novoProd(
              JSON.parse(JSON.stringify({name:$scope.name, price:$scope.price}))
            );

          $scope.product = ProdutosFactory.ObterProd.todos();
      };

});

Here to Factory

    angular
        .module("app")
        .factory("ProdutosFactory", function($resource){
   var factoryProduct = {
        ObterProd: $resource('http://localhost:9000/product', {}, {
            todos: {method: 'GET', isArray: true}
        }),
        IncluirProd: $resource('http://localhost:9000/product', {}, {
            procProd: {method: 'GET', params: {name: '@name', price: '@price'}}
        }),
        NovoProd: $resource('http://localhost:9000/product', {}, {
            novoProd: {
                    method: 'POST',
                    dataType: "json",
                    data: '',
                    params:{name: "name", price: "price"},
                    headers :{'Content-Type':'application/json;odata=verbose'},




                            }
        }),



   };
    return factoryProduct;


});

here to view

<div ng-controller="ProdutosController">


    <form name="addprodutosform" ng-submit="NovoProd()">
        <table>
            <tr>
                <td>Nome do Produto</td>
                <td><input type="text" ng-model="name"/></td>
            </tr>
            <tr>
                <td>Preco</td>
                <td><input type="text" ng-model="price"/></td>
            </tr>
            <td colspan="2"><input type="submit"/></td>
        </table>

    </form>

</div>

And on payload:

error 406 I cannot understand this error.