Storing null value inside database while trying to save data using angularjs and asp.net mvc

I'm trying to create a single page application using ASP.net MVC and angular.js. I am following the instruction Here. My model class is as follows

public class Person
{
        public int Id { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
}

and my app.js class is as follows

//Step-01 : Define Module
var PersonModule = angular.module('PersonModule', ['ngRoute', 'ngResource']);

//Step:04 : Define Module Configuration
PersonModule.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        controller: DetailsController,
        templateUrl: 'list.html'
    })
    .when('/new', {
        controller: CreateController,
        templateUrl: 'new.html'
    })
    .otherwise({ retdirectTo: '/' });
}]);

//Step : 02 Define Factory for Hold resource and request server
PersonModule.factory('PersonResource', function ($resource) {
    return $resource('/api/Person/:id', { id: '@id' }, { update: { method: 'PUT', isArrary: true } });
});

//Step : 03 Define Controller i.e. business logic
var CreateController = function ($scope, $location, PersonResource) {
    //Create a variable in the controller for save button catpion
    $scope.Action = 'Create';

    //Define method for Create
    $scope.Create = function () {
        //Call the Save method of $resource and passed paremeter to it $scope.Person here Person is a model
        PersonResource.save({ post: $scope.Person }, function () {

            //If call is success then call path method of $location directive for redirect
            $location.path('#/');
        });
    }
}

var DetailsController = function ($scope, PersonResource) {
    //Call the query method of $resource directive
    $scope.Persons = PersonResource.query();
}

and my html file code is as follows

<h2>{{Action}} Person</h2>
<form>
    <div>
        <label for="Person.Name">Person:</label>
        <input ng-model="Person.Name" name="Name" />
    </div>
    <div>
        <label for="Person.Address">Address:</label>
        <input ng-model="Person.Address" name="Address" />
    </div>
    <div>
        <a href="#/">Cancel</a>
        <button ng-click="Create()">{{Action}}</button>

    </div>
</form>

Below given my Server Side Controller Put method: Here is my Server Controller Action Method that put data:

public HttpResponseMessage Post(Person person)
{
    context.Persons.Add(person);
    context.SaveChanges();
    HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, person);
    response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = person.Id }));
    return response;       
}

when i press save button it get null value for Name and Address and though Id is an identity field it get value for Id and finally save to database with null value at Name and address.

when I check developer resource from Network tab of Chrome it shows me following information: