Shopping cart in asp.net mvc4 using html5 local storage and angular js

As per the suggestions on my last question. I did more research and started to code.

The flowchart I am following now is :
I have a products page and partial view for Cart.

====> User adds a product by clicking add to cart
====> The Product Details are sent to ASP Controller where a model instance is created for a cart object
====> the Model Object is sent to AngularJS controller using JSON.
====> I store the data in local storage and display the same in the ASP Cart partial view
====> I can update change in quantity, calculating total, easily using Angular.

However I am not able to pass the model object from ASP Controller to Angular Controller and display the same in the partial view.

=================================================================================

Here are the code snippets I wrote:

JS for sending the product data from Products Page to ASP Controller:

function HandleAddtoCartButton() {
$(document).on("click", "#btn-add-to-cart", function (e) {
    var productname = $(".displayproductdetails").data('name');
    var productimg = $(".displayproductdetails").data('img');
    var productprice = $(".displayproductdetails").data('price');

    $.ajaxSetup({ cache: false });
    $.ajax({
        url: "/Product/Cart",
        data: { name: productname, imgurl: productimg, price: productprice },
        cache: false,
        type: 'Post',
        success: function (data) {
            $('body').append(data);
        }
    });
})

}

My Controller Action:

[HttpPost]
    public JsonResult Cart(string name, string imgurl, string price)
    { 
        CartClass newcart = new CartClass();
        newcart.PictureImgURL = imgurl;
        newcart.ProductName = name;
        newcart.Price = float.Parse(price);
        newcart.Quantity = 1;
        return Json(newcart, JsonRequestBehavior.AllowGet);
     }

AngularJS Controller:

    var app = angular.module('Cart', []);
app.controller('CartController', function ($scope, $http) {
    GetCartData()

    function GetCartData() {
        $http({
            method: 'Get',
            url: '/Product/Cart'
        }).success(function (data, status, headers, config) {
            $scope.DisplayCart = data;
        }).error(function (data, status, headers, config) {
            $scope.message = 'Unexpected Error';
        });
    }
});

And finally my partial view:

@model IEnumerable<User_Public.Models.CartClass>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/AngularCart.js"></script>

<div ng-app="Cart">
    <div >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body" ng-controller="CartController">
                <div ng-model="DisplayCart">

                </div>
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-success"> CheckOut</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

            </div>
        </div>
    </div>
</div>

My doubts:
1. Passing the model object from ASP Controller to AngualarJS Controller
2. And storing it to local storage and Displaying the data in the partial view.

I am open to alternate methods and technologies to achieve this, also I just started with ASP MVC 4 and Angular JS, so please some code examples will help more.
Thank you.