javascript - Changes in ng-style have no effect to CSS-Style -

i have material design grid list either 1 or 2 columns dependend of screen size. if there 1 column (xs-screens) want give every second tile background-color. in 2 column layout colored tiles should diagonal, means every first , fourth tile (in block of four).

in hmtl calling function within ng-style attribute of md-grid-tile: ng-style="{{getbackgroundcolor($index)}}"

and in javascript function is:

$scope.getbackgroundcolor = function(index){   if($mdmedia("xs")){ //screen size extra-small     if(index % 2 === 0){       return "{'background-color':'lightgray'}";     }   } else {     if(index % 4 === 0 || index % 4 === 3){       return "{'background-color':'lightgray'}";     }   }   return "{'background-color':'white'}"; } 

this code working. if change screen size function gets called , ng-style attribute looks expected. style attribute doesn't cange anymore. means background-color remains calculated in beginning.

why doesn't style attribute change way ng-style does? here complete code example: http://plnkr.co/edit/g3mp8gaokn5ul9su7rc3?p=preview

any appreciated.

use

<md-grid-tile ng-repeat="number in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]"       layout-padding       ng-style="{'background-color':getbackgroundcolor($index)}">       <label>tile #{{$index}}</label>     </md-grid-tile> 

and function return color directly

$scope.getbackgroundcolor = function(index){   if($mdmedia("xs")){ //screen size extra-small     if(index % 2 === 0){       return 'red';     }   } else {     if(index % 4 === 0 || index % 4 === 3){       return 'blue';     }   }   return 'red'; } 

here working plunker http://plnkr.co/edit/3sfyhe559o2tkjogmpaw?p=preview