title: Angular js Populate dropdown with JSON
body: <p>i am new in angular js and learning it. today i got a code to populate  dropdown with JSON using angular. here is the code.</p>
  
  <pre><code>&lt;select ng-model="selectedTestAccount" ng-options="item.Id as item.Name for item in testAccounts"&gt;
      &lt;option value=""&gt;Select Account&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <h2>angular code</h2>
  
  <pre><code>angular.module('test', []).controller('DemoCtrl', function ($scope, $http) {
      $scope.selectedTestAccount = null;
      $scope.testAccounts = [];
  
      $http({
              method: 'GET',
              url: '/Admin/GetTestAccounts',
              data: { applicationId: 3 }
          }).success(function (result) {
          $scope.testAccounts = result;
      });
  });
  </code></pre>
  
  <p>this is not clear to me. <code>ng-options="item.Id as item.Name for item in testAccounts"</code> why as is using between two field name. if i need to specify 3 fields then code would look like  <code>ng-options="item.Id as item.Name as item.Desc for item in testAccounts"</code></p>
  
  <p>please help me to understand <strong>ng-options</strong></p>
  
  <p>also tell me why this <strong>selectedTestAccount</strong> required ?</p>
  
  <p>this way i populate dropdown but first time a empty row is getting added in dropdown.....why it is happening do not understand.</p>
  
  <p>second issue is when i select country from dropdown then country id is not showing. here is my code. please have a look and guide me.</p>
  
  <pre><code>&lt;div ng-controller="DemoCtrl" ng-app="main"&gt;
   &lt;p&gt;populate select options with ajax&lt;/p&gt;
  
  &lt;select name="cboCountry" ng-model="selectedCountry"&gt;
  &lt;option ng:repeat="facility in chooseCountries" value="{{facility.id}}"&gt;{{facility.name}}&lt;/option&gt;
  &lt;/select&gt;  
  &lt;span&gt;Selected country id is {{selectedCountry.countryId}}&lt;/span&gt;   
  
  &lt;/div&gt;
  
  var app = angular.module('main', []);
  app.controller('DemoCtrl', function ($scope) {
  
      $scope.chooseCountries=[
          {countryId : 1, name : "France - Mainland", desc: "some description" },
          {countryId : 2, name : "Gibraltar", desc: "some description"},
          {countryId : 3, name : "Malta", desc: "some description"}
      ];
  
      $scope.selectedCountry = angular.copy($scope.chooseCountries[0]);
  });
  </code></pre>
  
  <p>thanks</p>