Angularjs – Country select control for angularJs


I need to use a country dropdown in my angular-breeze app, and I tried with the following:

The problem here is that it doesn't have a country/code pair, just the long name of the country, which I don't want to save to the DB. Is there any other angular directive/service I can use to populate a dropdown with countries? I've done a bit of digging, but I didn't find any ready-to-use country select option for angular.

Best Solution

You can use ng-repeat or ng-options directive and create country dropdown. By this way, you have a full control. You can create as Directive if this element used in many places if needed.


Using ng-option directive

<select ng-model="country" ng-options=" for country in countries track by country.code">
  <option value="">-- Select a Country --</option>

Using ng-repeat directive:

<select ng-model="country">
    <option value="">-- Select a Country --</option>
    <option ng-repeat="country in countries" value="{{country.code}}">{{}}</option>

Countries Scope in your controller:

    $scope.countries = [ 
        {name: 'Afghanistan', code: 'AF'},
        {name: 'Åland Islands', code: 'AX'},
        {name: 'Albania', code: 'AL'},
        {name: 'Algeria', code: 'DZ'},
        {name: 'American Samoa', code: 'AS'}