JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app ng-controller="MaterialsCtrl">
<input ng-model="search.name">
<div ng-repeat="group in groups">{{group.name}}
<div ng-repeat="material in materials | filter:filterByGroup(group) | filter:search ">{{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;
};
};
}