ng-class on the angular material chips

Question

I want to create some backlight for the chips which have an 'active' flag based on my key value type for which I have made a ng-class="{activeTag: $chip.active}" but it doesn't works. How to add this 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

Answer 1

Your issue is likely the fact that you're trying to use $chip on the md-chips element. This is the container not the repeater. The content inside your template is what gets repeated.

I'm not too familiar with the MD components, but you're a level or two too far outside to access $chip

Answer 2

Try it this way. modify tour css to just .activetag and add ng-class to md-chip-template

CSS:

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

html :

<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>
</md-chips>