Angular JS: Binding using ng-model with an ng-repeat on a select element

Question

So, I have the following working code:

Angular:

$scope.audit = {user: ''};

HTML:

<md-select ng-model="audit.user"">
    <md-option ng-repeat="u in users" value="{{u.username}}">
        {{u.username}}
    </md-option>
</md-select>

But, previously I was trying to bind as follows.

Angular:

$scope.auditUser = '';

HTML:

<md-select ng-model="auditUser">
    ..
</md-select>

I read a bit online about not binding to primitives within ng-repeat but nothing conclusive. So I was wondering why the latter solution does not work and why do we have to bind our model to objects when using ng-repeat, is it something to do with the $scope and $digest cycles (of which I don't know in much detail)?

Thanks

You could try ng-options.

Ajeet Shah
– Ajeet Shah

2016-09-13 12:53:36 +00:00
Commented Sep 13, 2016 at 12:53 — Ajeet Shah
– Ajeet Shah, Commented Sep 13, 2016 at 12:53
Just wondering - ng-value="u.username" might work better.

itamar
– itamar

2016-09-13 14:02:19 +00:00
Commented Sep 13, 2016 at 14:02 — itamar
– itamar, Commented Sep 13, 2016 at 14:02

Tevin · Accepted Answer · 2016-09-13 13:56:31Z

1

Angular creates a new scope for each object in the ng-repeat directive. If that object is actually a primitive, it is passed by value rather than by reference. Therefore, any changes made in that child scope won't be propagated back to the original object in the parent scope.

answered Sep 13, 2016 at 13:56

Tevin

1,41417 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Angular JS: Binding using ng-model with an ng-repeat on a select element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related