Angular js dynamic select not binding to ngmodel


I am dynamically generating a select using ngrepeat from a $scope object and need to assign the default select option based on another value within the same $scope object:
Here is current code:

<select id="group" ng-model="" convert-to-number>
    <option ng-repeat="item in data.groups" value="{{}}">

Object in controller:

$ = {
    group: 2,
    groups: [{
        id: 1,
        name: 'Group One'
        name: 'Group Two'
        name: 'Group Three'

convert-to-number is a directive that converts $scope values to numbers to match with the id of the select options and everything works if I create hard coded options.

Once I dynamically generate the options with ng-repeat, it shows the correct options from data.groups in the select, and shows the correct group id in {{}}, however the select box is blank and I have to click to see the options and when I select one it then updates {{}} to the selected value of the option.

As mentioned with hard coded options all code works and the correct option is selected by default based on the {{}} value.

Why is not selecting the option in these dynamic options when first initialised?



The way AngularJS works is by using ng-selected within the <option> tag to confirm which option matches the model. The following example code would work:

<option ng-selected=" =="> ... </option>

Answered By – dat3450

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published