How to Add Dynamic Options for Multiple Selects Inside ng-repeat Directive ?

Given an HTML document containing some options element and the task is to add an array of javascript objects dynamically with multiple selects using ng-repeat in angularJS.

Approach:

The task is done using ng-repeat which loops through an array. Let's call this array "models". Each select menu present in the DOM is modeled to its specific index in the array. For example, the 2^nd select menu would be modeled to the 2^nd object in the model's objects array. To add more select menus to the DOM, we only need to push an empty object to the model's array, the ng-repeat directive takes care of the rest of reproduction.

Example 1:

In this example, we will add multiple selects and display the selected data.

Output:

All the data is successfully added to the objects array.

Example 2: In this example, we prepopulate the models array.

Output:

We see that the page now always contain country "India" and state "UP" as its prepopulated on page load.