Angular nulling data NULL

Already checked here

Problem in request with jQuery ($ .ajax) and Angular ($ http)

However, I'm not referring to sending my json form data to a form in html, dry the error

  Possible unhandled rejection: {"data": "", "status": 406, "config": {"method": "POST", "transformRequest": [null], "transformResponse": [null] "jsonpCallbackParam": "callback", "dataType": "json", "data": {"name": "we", "price": " "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "") "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" " "}

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's 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 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 can not understand this error.