A2H111/AngularJsCascardingDropdownlistComplete.html

## AngularJsCascardingDropdownlistComplete.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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>
</head>
<body>
    <form id="form1" runat="server">
    <div ng-app="drpdwnApp" ng-controller="drpdwnCtrl">
        Order
        <select ng-model="drpdpwnvalue" ng-change="fillCustomerList(drpdpwnvalue)">
            <option ng-repeat="item in ProductList" value="{{item.OrderID}}">{{item.OrderID}}</option>
        </select>
        Customers
        <select>
            <option ng-repeat="item in CustomerList" value="{{item.CustomerName}}">{{item.CustomerName}}</option>
        </select>
    </div>
    </form>
</body>
</html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	<title></title>
	<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>
	</head>
	<body>
	<form id="form1" runat="server">
	<div ng-app="drpdwnApp" ng-controller="drpdwnCtrl">
	Order
	<select ng-model="drpdpwnvalue" ng-change="fillCustomerList(drpdpwnvalue)">
	<option ng-repeat="item in ProductList" value="{{item.OrderID}}">{{item.OrderID}}</option>
	</select>
	Customers
	<select>
	<option ng-repeat="item in CustomerList" value="{{item.CustomerName}}">{{item.CustomerName}}</option>
	</select>
	</div>
	</form>
	</body>
	</html>