javascript - How to implement ng-class to md-chip in angular-material -

here problem - can't implement ng-class='{activetag: $chip.active}' <md-chip></md-chip>. i've been tried add directive <md-chips></md-chips> doesn't works(because of $chip not in current scope). can add ng-class md-chip-template visually it's not want, need backlight in tag. btw, <md-chip></md-chip> dynamically created in md-chips directive. maybe faced problem or know solution. thanks.

here 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       }   ];  }); 

my view

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

my css

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

here plunker

i may prefer use custom directive, add special class chip

.directive('mychip', function(){     return {         restrict: 'ea',         link: function(scope, elem, attrs) {             var mychip = elem.parent().parent();             mychip.addclass('_active');              scope.$watch(function(){                 return scope.$chip.active             }, function(newval){                 if (newval) {                   mychip.addclass('_active');                 } else {                   mychip.removeclass('_active');                 }             })          }     } }) 

template

<md-chip-template ng-class="{'activetag': $chip.active}" style="cursor: pointer;" my-chip> 

styles

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

http://plnkr.co/edit/vv2svh1gnj3oih1oaqvv?p=preview