javascript - ng-class on the angular material chips -

i want create backlight chips have 'active' flag based on key value type have made ng-class="{activetag: $chip.active}" doesn't works. how add ng-class on dynamically created md-chip.

view

<md-chips class="custom-chips selected" ng-model="tags" ng-class="{activetag: $chip.active}" readonly="true">   <md-chip-template style="cursor: pointer;" >     <a ui-sref="">       <strong>{{$chip.id}}</strong>       <em>({{$chip.name}})</em>     </a>   </md-chip-template> </md-chips> 

controller

controller('chipscontroller', function($scope) {     $scope.tags = [       {         id: 1,         name: 'pop',         active: false       },       {         id: 2,         name: 'rock',         active: true       },       {         id: 3,         name: 'reggie',         active: false       }   ];  }); 

css

.activetag md-chip{   background: rgba(85, 107, 47, 0.66) !important;   color: white !important;  } 

plunker

your issue fact you're trying use $chip on md-chips element. container not repeater. content inside template gets repeated.

i'm not familiar md components, you're level or 2 far outside access $chip