Web api Delete method input object parameter is null

Question

Inside my WebAPI asp.net mvc controller Delete method, the passed in object called contact is coming out to be null. I have checked my code every where and I can not figure out the root cause. I have edit operation working successfully in a very similar fashion.

So what is causing the contact object parameter inside the webapi asp.net method to come in as null value?

I have checked as shown in diagram that the contact object inside the angular controller is not null before being passed into the webapi delete method.

Here is my rest of the code 

  <div data-ng-controller="ContactDeleteController">
        <form name ="deleteContact" data-ng-submit="saveDeleteContact()">
            <div>
                <label>First Name: </label>
                <input required type="text" placeholder="Enter First Name" data-ng-model="contact.FirstName"/>
            </div>
            <div>
                <label>Last Name: </label>
                <input required type="text" placeholder="Enter Last Name" data-ng-model="contact.LastName"/>
            </div>
            <div>
                <label>Email Address: </label>
                <input required type="text" placeholder="Enter Email Address" data-ng-model="contact.EmailAddress"/>
            </div>
            <div>
                <label>Cell Phone Number: </label>
                <input required type="text" placeholder="Enter Phone Number" data-ng-model="contact.PhoneNumber"/>
            </div>
            <div></div>
            <div>
                <button class="btn btn-primary" type="submit">Delete</button>
            </div>
        </form>
    </div>



    var ContactDeleteController = function ($scope, $http, $location) {
        var contactId = $location.absUrl().match(/\/Delete\/(.*)/)[1];
        $http.get("/api/ContactWeb/" + contactId)
            .then(function (response) {
                $scope.contact = response.data;
            });

        $scope.saveDeleteContact = function () {
            var con = $scope.contact;
            $http.delete("/api/ContactWeb", con)
                .then(function (response) {
                    $scope.contact = response.data;
                });
            window.location = "/Contact/Index";
        };
    };

Answer 1

HTTP does not allow DELETE with body. Try sending the parameters in URI (query string, etc) and in Web API, bind the data into the complex type Contact using [FromUri].