JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app ng-controller="MaterialsCtrl">
    <input ng-model="search.name">
    <div ng-repeat="group in groups">
        <div ng-repeat="material in materials | filter:filterByGroup(group) | filter:search ">
            <span ng-show="$first">
               {{group.name}}
                <br/>
            </span>
            {{material.name}}
        </div>
    </div>
</div>

JavaScript

function MaterialsCtrl($scope) {
    $scope.groups = [{
        name: "First",
        id: 1
    }, {
        name: "Second",
        id: 2
    }];
    $scope.materials = [{
        name: "ABC",
        groups: [{
            id: 1
        }, {
            id: 2
        }]
    }, {
        name: "DEF",
        groups: [{
            id: 1
        }]
    }];

    $scope.filterByGroup = function (group) {
        return function (item) {
            for (var i = 0; i < item.groups.length; i++) {
                var ig = item.groups[i];
                if (ig.id == group.id) return true;
            }
            return false;
        };
    };
}