cascading dropdown in angular with key relation between them - angularjs

Question

I have country and state dropdowns.Country and state has relation on countryid.
I am getting an error while fetching data for these two cascading dropdowns.
Below is the image of error on controller returning JsonResult for countries.
Angular function:
var getdata = fac.GetCountry = function () {
return $http.get('/Data/GetCountries')
};
getdata.then(function (d) {
$scope.CountryList = d.data;
}, function (error) {
alert('Error!');
});
Controller:
public JsonResult GetCountries()
{
List<Country> allCountry = new List<Country>();
using (SunilEntities dc = new SunilEntities())
{
allCountry = dc.Countries.OrderBy(a => a.CountryName).ToList();
}
return new JsonResult { Data = allCountry, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
//return Json(allCountry, JsonRequestBehavior.AllowGet);
}
View:
<div ng-controller="dropdowns">
Country : <select ng-model="CountryID" ng-options="I.CountryID as I.CountryName for I in CountryList" ng-change="GetState()">
<option value="">Select Country</option>
</select>
State : <select ng-model="StateID" ng-options="I.StateID as I.StateName for I in StateList">
<option value="">{{StateTextToShow}}</option>
</select>
<input type="button" value="Get Selected Values" ng-click="ShowResult()"/>
<div style="padding:10px; font-weight:bold; border:1px solid #f3f3f3">
{{Result}}
</div>
</div>
Models:
public partial class Country
{
public Country()
{
this.States = new HashSet<State>();
}
public int CountryID { get; set; }
public string CountryName { get; set; }
public virtual ICollection<State> States { get; set; }
}
public partial class State
{
public int StateID { get; set; }
public string StateName { get; set; }
public Nullable<int> CountryID { get; set; }
public virtual Country Country { get; set; }
public virtual State State1 { get; set; }
public virtual State State2 { get; set; }
}
public DbSet<Country> Countries { get; set; }
public DbSet<State> States { get; set; }

Answer 1

I got the soltution.
BY changing actions (controller) a bit i got the the results.
Controller:-
public JsonResult GetCountries()
{
using (SunilEntities dc = new SunilEntities())
{
var ret = dc.Countries.Select(x => new { x.CountryID, x.CountryName }).ToList();
return Json(ret, JsonRequestBehavior.AllowGet);
}
}
// Fetch State by Country ID
public JsonResult GetStates(int countryID)
{
using (SunilEntities dc = new SunilEntities())
{
var ret = dc.States.Where(x => x.CountryID == countryID).Select(x => new { x.StateID, x.StateName }).ToList();
return Json(ret, JsonRequestBehavior.AllowGet);
}
}
I have country and state dropdowns.Country and state has relation on coutryid.
I am getting an error while fetching data for these two cascading dropdowns.
Below is the image of error on controller returning JsonResult for countries.
Angular funtion:-
var getdata= fac.GetCountry = function () {
return $http.get('/Data/GetCountries')
};
getdata.then(function (d) {
$scope.CountryList = d.data;
}, function (error) {
alert('Error!');
});
View:-
<div ng-controller="dropdowns">
Country : <select ng-model="CountryID" ng-options="I.CountryID as I.CountryName for I in CountryList" ng-change="GetState()">
<option value="">Select Country</option>
</select>
State : <select ng-model="StateID" ng-options="I.StateID as I.StateName for I in StateList">
<option value="">{{StateTextToShow}}</option>
</select>
<input type="button" value="Get Selected Values" ng-click="ShowResult()"/>
<div style="padding:10px; font-weight:bold; border:1px solid #f3f3f3">
{{Result}}
</div>
</div>
Models:-
public partial class Country
{
public Country()
{
this.States = new HashSet<State>();
}
public int CountryID { get; set; }
public string CountryName { get; set; }
public virtual ICollection<State> States { get; set; }
}
public partial class State
{
public int StateID { get; set; }
public string StateName { get; set; }
public Nullable<int> CountryID { get; set; }
public virtual Country Country { get; set; }
public virtual State State1 { get; set; }
public virtual State State2 { get; set; }
}
public DbSet<Country> Countries { get; set; }
public DbSet<State> States { get; set; }