ng-class on the angular material chips

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

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