angularjs - Angular: a part of view does not update -

i have directive template following code

<div class="colorpicker"> <div>chosen color</div> <div class="color_swatch" style="background-color: {{ngmodel}}">&nbsp;</div> <div class="clearfix"></div>  <div>standard colors</div> <div class="color_squares">     <div ng-repeat="color in colorlist">{{color.trim() == ngmodel.trim()}} //does not update         <div class="color_swatch" style="background-color: {{ color }};"></div>     </div> </div> <div class="clearfix"></div> 

in directive, update ngmodel using below code color clicked - div next "chosen color" updated selected color. but, expression "{{color.trim() == ngmodel.trim()}}" amounts false.

{{color.trim() == ngmodel.trim()}} 

i have debugged code , values same.

what missing?

this because variable precisely named 'ngmodel' see article more explanation : http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/

to resume article : never use raw fields use dot. in scope change

$scope.ngmodel 

by

$scope.data.ngmodel 

and in html change ngmodel data.ngmodel.

when using dot may have undefined error, because have initialize object :

$scope.data={}; 

of course can jsut rename variable, may still have problem others directives.