Model does not update in ng-repeat

[chiragchamoli]

I have a array of hex colors ["#a17878","#222222"] when you loop through these with a ng-repeat.

                   <li  ng-repeat="color in  colors track by $index">
                       <div style="width:60px;border:3px solid {{color}};">
                            <input colorpicker="hex" type="text" ng-model="color" />
                      </div>
                  </li>

In this case the color picker won't update the model.

[boxxxie]

don't use primitives as models.

[chiragchamoli]

@boxxxie example above is simplified. But it won't still work in ng-repeat.

[boxxxie]

can you make a plnkr?

[chiragchamoli]

Please see http://plnkr.co/edit/xtk62ub2d71BX5uEzPSZ?p=preview.

If you change the color, it won't update the model.

[boxxxie]

sorry, having trouble loading plnkr ATM (in china). try ng-model="$parent.color"

ng-repeat creates a new scope.

[buberdds]

@chiragchamoli just like @boxxxie said ng-repeat creates a new scope for each element in a loop.

update your html markup to something like this

    <li  ng-repeat="c in  colors track by $index">
            <input style="width:60px;" colorpicker="hex" type="text" ng-model="$parent.colors[$index]" /> 
    </li>

[chiragchamoli]

@buberdds thanks this method works.