ng-model not populating select

Question

This is my object,

$scope.addresses = [
        {
            "addressLine1": "150 Address",
            "addressLine2": "LONDON",
            "addressLine3": "",
            "addressLine4": "EC00 00X"
        },
        {
            "addressLine1": "152 Address",
            "addressLine2": "LONDON",
            "addressLine3": "",
            "addressLine4": "EC00 00X"
        },
        {
            "addressLine1": "154 Address",
            "addressLine2": "LONDON",
            "addressLine3": "",
            "addressLine4": "EC00 00X"
        }
    ];

This is my select HTML

<select  ng-model="model.addressChoice" ng-options="(a.addressLine1+ ', '+ a.addressLine2+ ', '+ a.addressLine3+ ', '+ a.addressLine4) for a in addresses">
            <option value="" disabled selected>{{select.length}} Address's Found</option>
        </select>

I've found that when using model.addressChoice = addresses[2] it will populate the select field although should I use

mode.addressChoice = {
                "addressLine1": "154 Address",
                "addressLine2": "LONDON",
                "addressLine3": "",
                "addressLine4": "EC00 00X"
            }

This fails, why is that? I've set up a plunkr here as an example as well.

https://plnkr.co/edit/BtxMDP0mtJx4m7PTLD6B?p=preview

I think the value of your model should be an instance of your options (adresses) object or array. — user3791775
– user3791775, Commented Apr 19, 2016 at 10:16

Foker · Accepted Answer · 2016-04-19 10:07:52Z

3

It fails because you're creating another instance with this code:

        mode.addressChoice = {
            "addressLine1": "154 Address",
            "addressLine2": "LONDON",
            "addressLine3": "",
            "addressLine4": "EC00 00X"
        }

and "addresses" array, which setted in ng-options attribute, doesnt contains this elem. You should use only links to objects from "addresses" collection.

answered Apr 19, 2016 at 10:07

Foker

1,0113 gold badges10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Travis Heeter Over a year ago

@Liably - you should mark this as the correct answer.

Amila Sampath · Accepted Answer · 2016-04-19 10:19:21Z

0

Remove disabled selected inside option tag

    <select  
            ng-model="model.addressChoice" 
            ng-options="(a.addressLine1+ ', '+ a.addressLine2+ ', '+ a.addressLine3+ ', '+ a.addressLine4) for a in addresses">

            <option value="">{{select.length}} Address's Found</option>
 </select>

When loading selected " 3 Address's Found "

answered Apr 19, 2016 at 10:19

Amila Sampath

6454 gold badges11 silver badges28 bronze badges

Collectives™ on Stack Overflow

ng-model not populating select

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related