AngularJS: populate dropdown with json coming from mvc action
<p>i have action in mvc which fire when page request and from there i generate the json of my model and store in viewbag. in razor view i store json from viewbag to angular model. my code suppose to populate dropdown but not getting right output. please tell me where i made the mistake.</p>

<h2>MVC Action</h2>

<pre><code>public class HomeController : Controller
    {

        public ActionResult Index()
        {
            ViewBag.Countries = GetCountries();
            return View();
        }

        public JsonResult GetCountries()
        {
            List&lt;Country&gt; oList = new List&lt;Country&gt;()
           {
                new Country {ID=1,Name="United Kingdom"},
                new Country {ID=1,Name="United States"},
                new Country {ID=1,Name="Italy"},
                new Country {ID=1,Name="Germany"},
                new Country {ID=1,Name="India"}
           };
            return Json(oList);
        }
    }
</code></pre>

<h2>AngularJS code to populate dropdown</h2>

<pre><code>&lt;div class="row"&gt;
    &lt;div ng-app="drpdwnApp" ng-controller="drpdwnCtrl"&gt;
        &lt;select ng-model="ID" ng-options="item.Name for item in CountryList"&gt;
            &lt;option value="" &gt;--Select--&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/div&gt;


@section scripts
{
&lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;
    angular.module('drpdwnApp', []).controller('drpdwnCtrl', function ($scope, $http) {
        $scope.CountryList = null;
        $scope.fillCountryList = function () {
            $scope.CountryList = JSON.parse('@Html.Raw(Json.Encode(ViewBag.Countries))');
        };
        $scope.fillCountryList();
    });
&lt;/script&gt;

}
</code></pre>