Cascading dropdownlist from angular js and ASP MVC giving 404 eror

See more:

C#

ASP

MVC

AngularJs

MVC5

I tried to use Angularjs to populate dropdownlist in asp mvc project. One is item categories other list of items as per selected category. it builds with no errors, but when i run, it gives 404 error (in crome console debugger). please help to resolve.

Sale Controller

public class SaleController : Controller
    {
        private TIASHJDBContext db = new TIASHJDBContext();

        public ActionResult MasterIndex()
        {
            ViewBag.CustomerId = new SelectList(db.Persons, "Id", "FullName");
            ViewBag.ProductId = new SelectList(db.Products, "Id", "PName");
            ViewBag.CategoryList = db.Categories;

            var model = new Sale();
            return View(model);
        }


        public JsonResult GetCategories()
        {

            
                var ret = db.Categories.Select(x => new { x.Id, x.CatName }).ToList();
                return Json(ret, JsonRequestBehavior.AllowGet);
            
        }

        [HttpPost]
        public JsonResult GetProducts(int catId)
        {
            
                var ret = db.Products.Where(x => x.CategoryId == catId).Select(x => new { x.Id, x.PName }).ToList();
                return Json(ret);
            
        }
}

MasterIndex View

<div data-ng-app="myModule">
    <form name="mainForm" data-ng-submit="sendForm()" data-ng-controller="myController" novalidate>
        <div class="error">{{message}}</div>
        <div>
            <p align="right">

                <div class="form-group">
                    @Html.LabelFor(m => m.SaleType, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">

                        <select data-ng-model="category" data-ng-options="c.Id as c.CatName for c in Categories" data-ng-change="GetProducts()">
                            <option value="">-- Select Category --</option>
                        </select>

                    </div>
//// some codes

<td>
<select data-ng-model="products" data-ng-disabled="!products" data-ng-options="s.Id as s.PName for s in Products">
                                                <option value="">-- Select Product --</option>
                                            </select>
                                        </td>

script

var app = angular.module('myModule', []);
app.controller('myController', function ($scope, $http) {

    function GetCategories() {
        $http({
            method: 'Get',
            url: '/Sale/GetCategories/'
        }).success(function (data, status, headers, config) {
            $scope.categories = data;
        }).error(function (data, status, headers, config) {
            $scope.message = 'Unexpected Error';
        });
    }

    $scope.GetProducts = function () {
        var catId = $scope.category;
        if (catId) {
            $http({
                method: 'POST',
                url: '/Sale/GetProducts',
                data: JSON.stringify({ catId: catId })
            }).success(function (data, status, headers, config) {
                $scope.products = data;
            }).error(function (data, status, headers, config) {
                $scope.message = 'Unexpected Error';
            });
        }
        else {
            $scope.products = null;
        }
    }

});

please try to solve this

What I have tried:

I tried to use Angularjs to populate dropdownlist in asp mvc project. One is item categories other list of items as per selected category. it builds with no errors, but when i run, it gives 404 error (in crome console debugger). please help to resolve.