How to add a label above each md-chip in md-chips?

Question

I would to like create a label above md-chip based on their type, however objects with similar type should be grouped under one label like this:

<span> Orange item: </span>
<md-chip> Carrot </md-chip>

Red item:
Red apple
Strawberry

Yellow item:
Banana

<span> Orange item: </span>
<md-chip> Tomato </md-chip>

My apologies that I can't embed image to show my needs but can only do in text.

Here's what I've tried:

<span>Orange object:</span>
<md-chips ng-model="arrayList | filter: {type: 'orange'}"
          md-removable="true">
    <md-chip-template>
        {{$chip.name}}
    </md-chip-template>
</md-chips>

<span>Red object:</span>
<md-chips ng-model="arrayList | filter: {type: 'red'}">
    <md-chip-template>
        {{$chip.name}}
    </md-chip-template>
</md-chips>

<span>Yellow object:</span>
<md-chips ng-model="arrayList | filter: {type: 'yellow'}">
    <md-chip-template>
        {{$chip.name}}
    </md-chip-template>
</md-chips>

However, this would cause an error like this:

angular.js:13550 Error: [ngModel:nonassign] Expression 'arrayList | filter: {type: 'orange'}' is non-assignable. Element:

Are there other ways I can do to achieve the same?

[Update] Assuming there is a second Orange item, a new label and md-chip for the second Orange item should be created right below the last Yellow item.. Have updated the example code.