html - 如何在 md-chips 中的每个 md-chip 上方添加标签？

Question

我想根据它们的类型在 md-chip 上方创建一个标签，但是具有相似类型的对象应该像这样分组在一个标签下：

<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>

抱歉，我无法嵌入图像来显示我的需求，而只能在文本中进行。

这是我尝试过的：

<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>

但是，这会导致如下错误：

angular.js:13550错误：[ngModel:nonassign]表达式'arrayList | filter: {type: 'orange'}' 是不可赋值的。元素：

我还有其他方法可以达到同样的效果吗？

[更新] 假设有第二个橙色项目，则应在最后一个黄色项目的正下方创建第二个橙色项目的新标签和 md-chip。已更新示例代码。