AngularJsCascardingDropdownlist.js

 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('drpdwnApp', []).controller('drpdwnCtrl', function ($scope, $http) {
            $scope.ProductList = null;
            $scope.CustomerList = null;
            //Declaring the function to load data from database
            $scope.fillProductList = function () {
                $http({
                    method: 'POST',
                    url: 'AngularCascadingDropDownList.aspx/GetProductList',
                    data: {}
                }).success(function (result) {
                    $scope.ProductList = result.d;
                });
            };
            //Call the functino to populate the second dropdownlist
            //Here we pass the selected value from first dropdownlist as input parameter
            $scope.fillCustomerList = function (idvalue) {
                $http({
                    method: 'POST',
                    url: 'AngularCascadingDropDownList.aspx/GetCustomerList',
                    data: JSON.stringify({ orderID: idvalue })
                }).success(function (result) {
                    $scope.CustomerList = result.d;
                });
            };
            //Calling the function to load the data on pageload
            $scope.fillProductList();
        });
    </script>