In this post, I will make a Cascading Dropdown in AngularJS. Add 2 Class 1 for Countries and other for state. Write the following code:
public class Country 
{ 
    public int CountryId { get; set; } 
    public string CountryName { get; set; } 
} 
public class State 
{ 
    public int StateId { get; set; } 
    public string StateName { get; set; } 
    public int CountryId { get; set; } 
} 

Create a ActionResult Name it as Index [Add a View].

Add the script

<script src="~/Scripts/angular.min.js"></script> 

Create a js Name it in my case its CascadingDropdown.

var app = angular.module('myApp', []); 
app.controller('myController', function ($scope, $http) { 
    getcountries(); 
    function getcountries() { 
     
        $http({ 
            method: 'Get', 
            url: '/Home/Countries' 
 
        }).success(function (data, status, header, config) { 
 
            $scope.countries = data; 
        }).error(function (data, status, header, config) { 
            $scope.message = "Error"; 
        }); 
    } 
 
    $scope.GetStates = function ()  
    { 
        var countryIdselected = $scope.countrymodel; 
        if (countryIdselected) { 
            $http({ 
                method: 'Post', 
                url: '/Home/States', 
                data: JSON.stringify({ countryId: countryIdselected }) 
            }).success(function (data, status, header, config) { 
                $scope.states = data; 
            }).error(function (data, status, header, config) { 
                $scope.message = "Error"; 
            }) 
        } 
        else { 
            $scope.states = null; 
        } 
    } 
}); 
 
 
//Calls for Country DropDown 
 public ActionResult Countries() 
        { 
            List<Country> cobj = new List<Country>(); 
            cobj.Add(new Country { CountryId = 1, CountryName = "India" }); 
            cobj.Add(new Country { CountryId = 2, CountryName = "Srilanka" }); 
            cobj.Add(new Country { CountryId = 3, CountryName = "USA" }); 
 
            return Json(cobj, JsonRequestBehavior.AllowGet); 
        } 
 
//Calls for State DropDown with CountryID as Parameter 
 
        public ActionResult States(int countryId) 
        { 
   List<State> sobj = new List<State>(); 
   sobj.Add(new State { StateId = 1, StateName = "Karnataka", CountryId = 1 }); 
   sobj.Add(new State { StateId = 2, StateName = "Kerala", CountryId = 1 }); 
   sobj.Add(new State { StateId = 3, StateName = "TamilNadu", CountryId = 1 }); 
   sobj.Add(new State { StateId = 1, StateName = "Newyork", CountryId = 3 }); 
   sobj.Add(new State { StateId = 1, StateName = "Colombo", CountryId = 2 }); 
 
//Filter based on CountryID 
            var result = sobj.Where(x => x.CountryId == countryId).Select(x => new { x.StateId, x.StateName }); 
 
            return Json(result); 
        } 
 
//IndexView 
//  Add the script file <script src="~/Scripts/CascadingDropdown.js"></script> 
<div ng-app="myApp"> 
       
            <form name="mainForm"  ng-controller="myController"> 
 
                <select ng-model="countrymodel" ng-options=" c.CountryId as c.CountryName for c in countries" ng-change="GetStates()"> 
                    <option value="">-- Select Country --</option> 
                </select> 
                <select ng-model="statemodel" ng-options="s.StateId as s.StateName for s in states "> 
                    <option value="">-- Select State --</option> 
                </select> 
            </form> 
</div>  

I hope it works for you!

HostForLIFE.eu AngularJS Hosting

HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.