Last Updated: February 25, 2016
· felipebrnd

Angular: how to update model with single object properties

Problem: You have a collection of objects which are used to build a select and you want to bind the selected option to a single property.

TL;DR; Solution: use ng-repeat + ng-value to build the select.


ng-value attribute receives an angular expression which will be used to bind ng-model. I tried using ng-options but only worked for me when using ng-repeat.

Controller code:

  this.persons = [{name:'Mike',id:1},{name:'Molly',id:2}];

  //ng-model property:
  this.personId = null;


<div ng-controller="CWExampleController as ctrl">
  <select ng-model="ctrl.personId" ng-value="">
    <option ng-repeat="p in ctrl.persons" value="{{}}">{{}}</option>
  <p>Selected person id: {{ctrl.personId}}</p>