AngularJS bring drop down items to the beginning

Handsontable JavaScript Spreadsheet Most popular component for web apps

I have a drop down select box which displays a list of countries for the user to choose from. It’s common practice these days to have the most frequently selected countries listed at the top of the list so they can be selected quicker. Let’s see how we can achieve this using AngularJS. I’m using Bootstrap for the drop down box.

Original List, alphabetically ordered.


New List, alphabetically ordered with most common countries at the start. This is the demo i made in plunker.


AngularJS Bootstrap Drop Down Demo

Note: A little bit of manual work with adding the countries and ids to the array but that’s about it.

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

Leave a Reply

Your email address will not be published. Required fields are marked *