Angular Bind Dropdown List

In Angular, you can use the “ng-options” directive to bind a dropdown list to a collection of data. This allows you to dynamically populate the dropdown with options based on data from your controller, and also to bind the selected value to a model in your scope.

Example

Let’s say you have a collection of countries in your controller:

  $scope.countries = [
    "USA",
    "Canada",
    "Mexico",
    "Germany",
    //... more country names
  ];
  

You can use the “ng-options” directive in your HTML to bind this collection to a dropdown list:

  <select ng-model="selectedCountry" 
          ng-options="country for country in countries">
  </select>
  

This will create a dropdown list with options for each country in the “countries” collection, and it will bind the selected country to the “selectedCountry” model in your scope.

Filtering and Grouping

You can also use the “ng-options” directive to filter and group the options in your dropdown list. For example, if you have a collection of objects with “name” and “group” properties, you can filter and group the options as follows:

  <select ng-model="selectedCountry" 
          ng-options="country.name group by country.group for country in countries">
  </select>
  

This will create a dropdown list with options grouped by the “group” property of the objects in the “countries” collection.

Conclusion

Using the “ng-options” directive in Angular, you can easily bind a dropdown list to a collection of data and customize how the options are displayed and grouped. This makes it easy to create dynamic and user-friendly dropdown lists in your Angular applications.