Angularjs – how to use select with ng-repeat?

All we need is an easy explanation of the problem, so here it is.

In the view available below I’m trying to select a value in the drop down box based on a key(colorId) available in the current ng-repeat object(user). Does anyone know how to do that?

<div ng-app>
  <div ng-controller="MyCntrl">
        <thead >
                    <th width="50%">User</th>
                    <th width="50%" >Color</th>            
         <tr ng-repeat="user in users">
             <td width="50%">{{}}</td>
             <td width="50%"> 
                 <select ng-model="user.colorid" ng-options=" for color in colors">
                          <option value="">Select color</option>

The controller code is:

'use strict';

  .controller('MyCntrl',['$scope',function ($scope) {
   $scope.colors = [
    {id:'1', name:'blue'},
    {id:'2', name:'white'},
    {id:'2', name:'red'}

    $scope.users = [
        { name:'user1',colorId:'1'},
        { name:'user2',colorId:'2'}

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You need to fix a few things in your <select> element:

use as in your ng-options.

ng-options=" as for color in colors"

you typoed “colorid”:


Here’s a plunk of it working:

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply