mdChips with filter

I'm a Newbie to AngularJS trying something with Angular Material and need some ideas / help.

I have icons of Font Awesome which are displayed with ng-repeat:

<ul ng-repeat="item in items">
  <i ng-class="{'test': item.active}" class="fa fa-{{item.name}}">{{item.name}}</i>
</ul>

Below I have a list of the icons a with checkboxes:

<span ng-repeat="item in items | filter: item.active = false">
  <input type="checkbox" ng-model="item.active"> {{item.name}}<br>
</span>

If a checkbox is activated, the list entry should disappear from the list. This works with the filter of the property item.active

Now I want to display the activated items above the list with md-chips (Angular Material Chips).

So if a list item is activated, the element should be a md chip above the list (not displayed in the list anymore).

If I click on the 'X' in md-chip, only the state of the property item.active should change again to false.

I have my working files on Plunker, so my current working state can be read: https://plnkr.co/edit/t3Xpp2AKEJHXBWhkLUYZ?p=preview

Does anybody got an idea how can I implement this?

The easiest way to do that is apply ng-click to your md-chip item and by this click it will set active = false:

...
<md-chips class="custom-chips" ng-model="items | filter: {active:true}" readonly="true">
    <md-chip-template>
        <span ng-click="$chip.active=false">
            <strong>{{$chip.name}}</strong>
        </span>
    </md-chip-template>
</md-chips>
...

Here is a plnkr example.

EDIT:

Modified plunker to show only active md-chips.

Hope it will help.