AngularJS bring drop down items to the beginning

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 is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and love to share what he learns.

Leave a Reply

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