dropdown list bind in MVC using angularjs

Question

 

 Can any one tell what is the error???

 $scope.country = response;

Here value is coming properly but in dropdown list data is not binding ..it showing undefined....

 

 

@{

ViewBag.Title = "Index";

}

<h2>Index</h2>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>

<script type="text/javascript">

//Module

var myApp = angular.module('myApp', []);

//Controller

myApp.controller('MainCtrl', ['$scope', '$http',

function ($scope, $http) {

debugger;

$scope.country = [];

$scope.selectedcountry = null;

$http.get('/Employee/GetCountry').then(function (response) {

$scope.country = response;

});

}]);

</script>

<div data-ng-app="myApp">

<div data-ng-controller="MainCtrl">

<select ng-model="selectedcountry"

ng-options="item.countryId as item.countryName for item in country">

<option value="">Select country</option>

</select>

</div>

</div>

 

============Controller Code======================= 

public class Country

{

public int countryId { get; set; }

public string countryName { get; set; }

}

[HttpGet]

public JsonResult GetCountry()

{

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ToString());

con.Open();

SqlCommand cmd = new SqlCommand("getAllCountry", con);

cmd.CommandType = CommandType.StoredProcedure;

SqlDataAdapter adp = new SqlDataAdapter(cmd);

DataTable dt = new DataTable();

adp.Fill(dt);

con.Close();

DataSet ds = new DataSet();

ds.Merge(dt);

List<Country> listrs = new List<Country>();

foreach (DataRow dr in ds.Tables[0].Rows)

{

listrs.Add(new Country

{

countryId = Convert.ToInt32(dr["countryId"]),

countryName = dr["countryName"].ToString(),

});

}

return Json(listrs, JsonRequestBehavior.AllowGet);

}

 

==============