how to show list in mvc with angular js?

   public JsonResult getList()
        {
            var Product = new List<Product>();

            Product = GetList1();
            return Json(Product, JsonRequestBehavior.AllowGet);
        }
        public List<Product> GetList1()
        {
            List<Product> prod = new List<Product>(){
             new Product { ProductId = 1, ProductName = "Tomato Soup", CategoryId = "Groceries", DisplayProductPrice = 1,ProductImage="1.jpg",OutOfStock="0",ProductSummary="jhjhj" },
            new Product { ProductId = 2, ProductName = "Yo-yo", CategoryId = "Toys", DisplayProductPrice = 3.75M ,ProductImage="1.jpg",OutOfStock="0",ProductSummary="jhjhj" },
            new Product { ProductId = 3, ProductName = "Hammer", CategoryId = "Hardware", DisplayProductPrice = 16.99M,ProductImage="1.jpg",OutOfStock="0",ProductSummary="jhjhj" }
    };

            return prod;
        }

------------------------------------



@{
    ViewBag.Title = "Product";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ui-bootstrap-tpls-0.10.0.min.js"></script>
<link href="~/Scripts/bootstrap.min.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.7.1.js"></script>

<script>
    var appProd = angular.module("appProd", ['ui.bootstrap']);
    appProd.filter('startFrom', function () {
        return function (input, start) {
            if (input) {
                start = +start; //parse to int
                return input.slice(start);
            }
            return [];
        }
    });
    appProd.controller("cntProduct", function ($scope, $http, $timeout, $modal, $log) {
        var catid = 0;
        $scope.list = [];
        $scope.entryLimit = 2;
        debugger;
        $.ajax({
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            url: '/Home/GetList',
            success: function (data) {
                debugger;
                window.alert(1);
                $scope.list = data;
                $scope.currentPage = 1;
                $scope.entryLimit = 2;
                $scope.filteredItems = $scope.list.length;
                $scope.totalItems = $scope.list.length;
                if (catid == '1') {
                    $scope.bClass = "selected";
                    $scope.mClass = "";
                } else {
                    $scope.bClass = "";
                    $scope.mClass = "selected";
                }
            },
            error: function (response) {
                debugger;
                window.alert(1);
            }
        });

        $scope.setPage = function (pageNo) {
            $scope.currentPage = pageNo;
        };
        $scope.filter = function () {
            debugger;
            $timeout(function () {
                $scope.filteredItems = $scope.filtered.length;
            }, 10);

        };

        $scope.getText = function (obj) {
            debugger;

            return obj.replace(' ', '-').replace('&', '-');
        };



    });
</script>
<div id="scartcontent" class="scartcontent" ng-app="appProd" ng-controller="cntProduct">
    <div class="clr pad10"></div>

    <div class="fright cart">
        <div>
            <span>
                <img src='../../images/card-img.jpg' width="31" height="28" alt="" align="absmiddle" /></span><span> hjuyjuyjuy
                 <a href="ViewBasket" title="go to shopping cart">
                     <img src='../../images/green-chkout.jpg' title="Checkout" alt="" align="absmiddle" class="margL10" />
                 </a>
                </span>
        </div>

    </div>
    <div class="cd-tabs">
        <nav>
            <ul class="cd-tabs-navigation">
                <li style="display: none;"><a class="{{bClass}}" n1111g-click="getProductList('1')">Book</a>
                </li>
                <li><a class="{{mClass}}" ng11111-click="getProductList('2')">Magazine</a>
                </li>
            </ul>
            <!-- cd-tabs-navigation -->
        </nav>
        <ul class="cd-tabs-content">
            <li class="selected">

                <div class="pad5">
                    <div class="fleft pad10">
                        PageSize:                        
                    <select ng-model="entryLimit">
                        <option>2</option>
                        <option>5</option>
                        <option>10</option>
                        <option>20</option>
                        <option>50</option>
                        <option>100</option>
                    </select>
                    </div>
                    <div class="fright pad10">
                        <input type="text" class="add_input2 pad5" ng-model="search" ng-change="filter()" id="txtSearch" placeholder="Search Book/Magazine here" />
                    </div>
                </div>
                <div class="clear"></div>
                <div class="gd-row" align="center">

                    <div class="gd-col gu3" ng-repeat="prod in filtered = (list | filter:{ProductName:search}) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">

                        <div class="product-unit">
                            <div class="center">
                                <a ng-disabled='{{prod.OutOfStock=="0"? false :true }}' ng-href="{{prod.CategoryId}}/{{prod.ProductId}}/PD/{{getText(prod.ProductName)}}">
                                    <img style="width: 103px; height: 142px" ng-src="../../Images/{{ prod.ProductImage}}" /></a>
                            </div>
                            <div class="pu-details">
                                <div class="height35">
                                    {{prod.ProductName}}-  {{prod.ProductSummary}}
                                </div>

                                <div class="pu-price margT8">
                                    <div class="pu-border-top padT5">
                                        <div class="margB5">Rs.{{prod.DisplayProductPrice}}</div>
                                    </div>
                                    <div class="pu-border-top"></div>
                                </div>
                                <div class='{{prod.OutOfStock=="0"? "avalb":"notavalb" }}'>
                                    {{prod.OutOfStock=="0"? "Available":"Out of Stock" }}
                                </div>

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

                </div>
            </li>
        </ul>
        <div class="clear"></div>
        <div class="col-mid-10" style="background: #fff;">
            <div class="pad5">
                <div class="col-wid-10" ng-show="filteredItems == 0">
                    <h4>No Product found as per Search keyword </h4>
                </div>
            </div>
            <div class="clear"></div>
            <div class="fleft col-mid-10" ng-show="filteredItems > 0">
                <div class="fleft col-wid-3 pad10">
                    {{ "Showing " + (currentPage == 1 ? "1" : ((currentPage - 1) * entryLimit)+1) + " to " +
               ((currentPage * entryLimit) >= filteredItems ? filteredItems : (currentPage * entryLimit))
                 + " of " + filteredItems + " Items";}}
                </div>
                <div class="fright pagination-small margR10">
                    <div pagination="" page="currentPage" on-select-page="setPage(page)"
                        boundary-links="true" total-items="filteredItems" items-per-page="entryLimit"
                        previous-text="&laquo;" next-text="&raquo;">
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="disclm">
        <strong>Disclaimer</strong>:- All Magazines listed at this site belongs to Publication Division, Ministry of Info. & Broadcasting, for any product related queries or issues customers will have to contact the ministry at 011-2436 7453, email-id pdjucir@gmail.com  for any product non-delivery / refund / quality or other issues related to the magazines listed here. Office of CGA (BharatKosh Portal Owner) will complete financial transaction related activity only.
    </div>
    <div class="clear"></div>

</div>
<div class="clr pad10"></div>
<div class="clr padB20"></div>

View basket

<%@ Page Title="" Language="C#" MasterPageFile="~/Common/PaymentMaster.Master" AutoEventWireup="true" CodeBehind="ViewProductBasket.aspx.cs" Inherits="CGA.CPSMS.ReceiptPortal.ViewProductBasket" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="Scripts/angular.js"></script>
    <style>
        .input {
            width: 45px;
        }
    </style>

    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(-1); }
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <div id="content" class="content">
        <div class="brdcrumb"><a href='<% =Page.ResolveUrl("~/Product")%>'>Product</a> > Your Basket</div>
        <div class="btmbrd">
            <span class="head">
                <asp:Label ID="lblcaption" Text="Your Basket" runat="server"></asp:Label>
            </span>
            <span class="fright">&nbsp;&nbsp;</span>
        </div>
        <div class="pad10">

            <script>
                var appProd = angular.module("appProd", []);
                appProd.directive('focus', function ($timeout, $parse) {
                    return {
                        link: function (scope, element, attrs) {
                            var model = $parse(attrs.focus);
                            scope.$watch(model, function (value) {
                                if (value === true) {
                                    $timeout(function () {
                                        element[0].focus();
                                    });
                                }
                            });
                        }
                    };
                });

                appProd.directive('onlyNum', function () {
                    return function (scope, element, attrs) {
                        var keyCode = [8, 9, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110];
                        element.bind("keydown", function (event) {
                            $('#ctl00_ContentPlaceHolder1_imgLoad').show();
                            var vv = event.which;
                            var cc = this.value.length + 1;
                            if ($.inArray(event.which, keyCode) == -1) {
                                scope.$apply(function () {
                                    scope.$eval(attrs.onlyNum);
                                    $('#ctl00_ContentPlaceHolder1_imgLoad').hide();
                                    event.preventDefault();
                                });
                                event.preventDefault();
                            } else if ((vv != 8 && cc > 6)) {
                                $('#ctl00_ContentPlaceHolder1_imgLoad').hide()
                                event.preventDefault();
                            }
                            $('#ctl00_ContentPlaceHolder1_imgLoad').hide();

                        });
                    };
                });

                appProd.controller("cntProduct", function ($scope, $http) {
                    var dataObj = { value: '1' };

                    var res1 = $http.post('PublicationCartWebService.asmx/getBasketItem', dataObj);
                    res1.success(function (data, status, headers, config) {
                        $('#ctl00_ContentPlaceHolder1_imgLoad').show();
                        $scope.basket = eval(data.d);
                        $scope.isBasketEmpty = $scope.basket.length;
                        $scope.FocusIndex = 100;
                        $scope.number = 5;
                        $('#ctl00_ContentPlaceHolder1_imgLoad').hide();
                     
                    });
                    $scope.processed = 0;
                    var resTotalCount = $http.post('PublicationCartWebService.asmx/GetTotalCount', dataObj);
                    resTotalCount.success(function (data, status, headers, config) {
                        $scope.ShowItem = eval(data.d);

                    });
                    var resGrandTotalPrice = $http.post('PublicationCartWebService.asmx/getTotalPrice', dataObj);
                    resGrandTotalPrice.success(function (data, status, headers, config) {
                        $scope.GrandTotalPrice = eval(data.d);
                    });
                    $scope.TotalShowing = function () {
                        var resTotalCount = $http.post('PublicationCartWebService.asmx/GetTotalCount', dataObj);
                        resTotalCount.success(function (data, status, headers, config) {
                            $scope.ShowItem = eval(data.d);

                        });

                    };
                    $scope.TotalPrice = function () {
                        $scope.processed = 0;
                        var resTotalCount = $http.post('PublicationCartWebService.asmx/getTotalPrice', dataObj);
                        resTotalCount.success(function (data, status, headers, config) {
                            $scope.GrandTotalPrice = eval(data.d);


                        });


                    };

                    $scope.getNumber = function (num) {
                        return new Array(num);
                    };

                    $scope.saveItems = function (ProductAttributeMappingId, ProductItemPrice, qty) {
                        $scope.FocusIndex = qty.$index;
                        $scope.processed = 0;
                        $('#ctl00_ContentPlaceHolder1_imgLoad').show();
                        var qtyProd = qty.item.TotalQty;
                        var qtyProd1 = qty.item.Stock;
                        if (qtyProd <= qtyProd1 && qtyProd > 0 && qtyProd1 > 0) {
                         
                            var dataObj = { ProductAttributeMappingId: ProductAttributeMappingId, ProductItemPrice: ProductItemPrice, Quantity: qtyProd };
                            var res1 = $http.post('PublicationCartWebService.asmx/AddItem', dataObj);
                            res1.success(function (data, status, headers, config) {
                                $scope.basket = eval(data.d);
                                $scope.TotalPrice();
                                $scope.TotalShowing();
                                $('#ctl00_ContentPlaceHolder1_imgBtnCheckOut').show();
                                $('#ctl00_ContentPlaceHolder1_imgLoad').hide();


                            });
                        }
                        else {

                            if (qtyProd > 0) {

                                window.alert('Quantity entered must be less than or equal to stock available');
                                var dataObj11 = { value: '1' };
                                qty.item.TotalQty = '';
                                var res11 = $http.post('PublicationCartWebService.asmx/getBasketItem', dataObj11);
                                res11.success(function (data, status, headers, config) {
                                    $scope.basket = eval(data.d);
                                    $scope.isBasketEmpty = $scope.basket.length;
                                    $('#ctl00_ContentPlaceHolder1_imgBtnCheckOut').show();
                                    $('#ctl00_ContentPlaceHolder1_imgLoad').hide();
                                });
                            } else {

                                if (qty.item.TotalQty == 0) { qty.item.TotalQty = ''; } else {

                                    window.alert('Quantity must be greater than 0');
                                }
                                $('#ctl00_ContentPlaceHolder1_imgLoad').hide();
                                $('#ctl00_ContentPlaceHolder1_imgBtnCheckOut').hide();
                                $scope.processed = 1;

                            }
                        };

                    };

                    $scope.Remove = function (ProductAttributeMappingId) {
                        $scope.processed = -1;
                        if (window.confirm("Are you sure to remove product from basket?")) {
                            var dataObj = { ProductAttributeMappingId: ProductAttributeMappingId };
                            var res1 = $http.post('PublicationCartWebService.asmx/RemoveItem', dataObj);
                            res1.success(function (data, status, headers, config) {
                                $scope.basket = eval(data.d);
                                $scope.isBasketEmpty = $scope.basket.length;
                                $scope.TotalShowing();
                                $scope.TotalPrice();
                                $('#ctl00_ContentPlaceHolder1_imgBtnCheckOut').show();

                            });
                        }
                    }
                    $scope.ImageExist = function (url) {
                        var img = new Image();
                        img.src = url;
                        if (img.height == 0) { return 'ProductImages/' + url; } else {
                            return '/ProductImages/1.jpg'
                        }
                    };

                });

            </script>
            <div ng-app="appProd" ng-controller="cntProduct">

                <div class="col-mid-10" align="center" id="imgLoad" runat="server" style="position: absolute; height: 150px; width: 1000px; z-index: 999; margin: auto 0;">
                    <img src='<% =Page.ResolveUrl("~/App_Themes/Receipt/images/loading-x.gif")%>' style="height: 150px; width: 200px;" />
                </div>

                <div ng-show="isBasketEmpty >0" class="gd-row">
                    <table class="data1" cellpadding="0" cellspacing="0" ng-show="isBasketEmpty > 0">
                        <tr class="data1-head">
                            <td class="col-mid-2">&nbsp;</td>
                            <td class="col-mid-2">Product Description</td>
                            <td class="col-mid-2">Unit Price</td>
                            <td class="col-mid-1">Qty.</td>
                            <td class="col-mid-1">Sub Total</td>
                            <td class="col-mid-1"></td>
                        </tr>
                        <tr ng-repeat="item in basket">
                            <td>
                                <img style="width: 65px; height: 83px;" ng-src="{{ImageExist(item.ProductImage)}}"></td>
                            <td>
                                <span>{{item.ProductName}}</span><br />
                                <span>Subscription: {{item.ProductIssues}}</span><br />
                                <span>Language: {{item.ProductLanguage}}</span><br />
                                <span>Country: {{item.ProductCountry}} </span>

                            </td>
                            <td>Rs.{{item.ItemPrice.toFixed(2)}}</td>
                            <td>
                               <%-- <input  class="input" type="text" only-num name='{{$index}}' id='{{$index}}' ng-model="item.TotalQty"
                                    ng-change="saveItems(item.ProductAttributeMappingId,item.ItemPrice,this)" focus="{{FocusIndex==$index? true:false}}" />--%>
                             
                                <select ng-model="item.TotalQty"  class="input" ng-change="saveItems(item.ProductAttributeMappingId,item.ItemPrice,this)">                                    
                                    <option ng-repeat="i in getNumber(item.Stock) track by $index"" >{{$index+1}}</option>                                  
                                </select>
                            </td>
                            <td>Rs. {{(item.ItemPrice*item.TotalQty).toFixed(2) }}</td>
                            <td title="remove from cart">
                                <span>
                                    <a href="" ng-click="Remove(item.ProductAttributeMappingId)">
                                        <img src='<% =Page.ResolveUrl("~/App_Themes/Receipt/images/delete-icon.jpg")%>' alt="" /></a>
                                </span></td>
                        </tr>



                    </table>

                    <div class="grandtotal">
                        <div class="fleft col-mid-6">
                            Cart Summary: You have <strong>{{ShowItem}}</strong>  in your shopping cart.
                        </div>
                        <div class="fright col-mid-3">
                            <table class="fright">
                                <tr>
                                    <td class="col-mid-7"></td>
                                    <td class="col-mid-3"><strong></strong>
                                    </td>
                                </tr>
                                <tr>

                                    <td><strong>Grand Total: &nbsp;&nbsp; Rs. {{GrandTotalPrice}}</strong>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="pad10 margT8">
                        <span class="fleft" style="width: 70%;"><a href="Product">
                            <img src='<% =Page.ResolveUrl("~/App_Themes/Receipt/images/continue-shipping.jpg")%>' title="Continue Shopping" width="206" height="33" alt="" /></a> </span>
                        <span class="fleft" style="width: 30%">
                            <div id="divShow" ng-show="processed >0" style="color: red; font-weight: bold;" runat="server">Quantity required to proceed further</div>
                            <div id="divShow1" ng-show="processed<1" runat="server">
                                <asp:ImageButton ID="imgBtnCheckOut" ImageUrl="~/App_Themes/Receipt/images/sml-place-order.jpg" ToolTip="Place  Order" runat="server" OnClick="imgBtnCheckOut_Click" />
                            </div>
                        </span>
                    </div>
                </div>
                <div ng-show="isBasketEmpty ==0" class="gd-row">
                    <b style="padding-left: 16px;">No product added in your basket.</b>
                    <div class="clearfix"></div>

                    <div class="pad10 margT8">
                        <span class="fleft" style="width: 70%;"><a href="Product">
                            <img src='<% =Page.ResolveUrl("~/App_Themes/Receipt/images/continue-shipping.jpg")%>' title="Continue Shopping" width="206" height="33" alt="" /></a> </span>

                    </div>
                </div>
            </div>
            <div class="clr"></div>
        </div>
        <div class="disclm">
            <strong>Disclaimer</strong>:- All Magazines listed at this site belongs to Publication Division, Ministry of Info. & Broadcasting, for any product related queries or issues customers will have to contact the ministry at 011-2436 7453, email-id pdjucir@gmail.com  for any product non-delivery / refund / quality or other issues related to the magazines listed here. Office of CGA (BharatKosh Portal Owner) will complete financial transaction related activity only.
        </div>
        <br />
    </div>
</asp:Content>