For dropdown

In Listing 1 I am using ng-app, ng-controller, ng-model, ng-options, ng-change AngularJS directives.
HTML control div consists Select dropdown which is populated from JSON array countryList using ng-options.
In the scope of Angular controller "drpCountryController" ng-model " selectedCountry " is set with 2 like $scope.selectedCountry = 2;

Sample Code
  1. <script>
  2. var app = angular.module('App', []);
  3. app.controller('drpCountryController',function($scope)
  4. {
  5. $scope.selectedCountry = 2;
  6. $scope.countryList = [{ " Name ": "India", "Id": 1 },
  7. { "Name": "Nepal", "Id": 2 },
  8. { " Name ": "Pakistan", "Id": 3 }]
  9. $scope.drpChange= function()
  10. {$scope.SelectedItemDetails = $scope.selectedCountry; }
  11. });
  12. </script>

HTML

  1. <body ng-app="App">
  2. <div ng-controller="drpCountryController">
  3. Employee List<select ng-model="selectedCountry" ng-options="country.Id as country.Name for country in countryList" ng-change="drpChange()"></select>
  4. <br /><br />
  5. <span>{{SelectedItemDetails}}</span>
  6. </div>
  7. </body>

The output looks like Figure 1.

Figure 1

For Radio button list

In Listing 2 I am using ng-app, ng-controller, ng-model, data-ng-repeat, ng-checked AngularJS directives.

Html control div consists level and radio type input HTML control which is populated from JSON array countryList using data-ng-repeat.

In the scope of Angular controller "rdiobuttonlist" ng-checked is set with 2 like

ng-checked= "{{country.value==2}}".

Listing 2
  1. <script>
  2. var app = angular.module('App', []);
  3. app.controller('rdiobuttonlist', function ($scope) {
  4. $scope.countryList = [{ " Name ": "India", "Id": 1 },
  5. { "Name": "Nepal", "Id": 2 },
  6. { " Name ": "Pakistan", "Id": 3 }]
  7. });
  8. </script>
Html
  1. <body ng-app="App">
  2. <div ng-controller="rdiobuttonlist" style="background-color:lightgray;padding-left:50px">
  3. <label data-ng-repeat="country in countryList">
  4. <input type="radio" name="radio2" ng-checked="{{country.Id==2}}" style="margin:0px 5px 0px 10px;" value="{{country.Id}}"/>{{country.Name}}
  5. </label>
  6. </div></body>

The output looks like Figure 2

Figure 2

Summary

In this article, I discussed how to set default selected item in the drop-down and how to set the default selected item in radio button list using Angular.