AngularJS Example

HTML

<div ng-app="app">
 <div ng-controller="ParentCtrl">
     <input data-ng-model="filterText" data-ng-change="updateTypes()" />
     <div data-ng-repeat="type in filteredTypes">
         {{ type.name }}
         <ul>
              <li style="margin-left:20px;" data-ng-repeat="entry in type.entries">
                  - {{ entry.name }}
              </li>
          
         </ul>
     </div>
 </div>
</div>

CSS

</style>

JavaScript

angular.module('app', [])

function ParentCtrl($scope){
    $scope.filterText = "";
    $scope.types = [
		{ name: "type1", entries: [{ name: "name1"}, { name: "name2"}, { name: "name3"}]},
		{ name: "type2", entries: [{ name: "name1"}, { name: "name3"}, { name: "name3"}]},
		{ name: "type3", entries: [{ name: "name1"}, { name: "name2"}, { name: "name5"}]},
            { name: "type4", entries: [{ name: "name4"}, { name: "name2"}, { name: "name3"}]}
    ];
    
    $scope.filteredTypes = [];
    $scope.updateTypes = function(){
        $scope.filteredTypes.length = 0;
        for(var x = 0; x < $scope.types.length; x++){
            if($scope.filterText === ""){
                $scope.filteredTypes.push($scope.types[x]);    
            }
            else{
                var entries = [];
                for(var y = 0; y < $scope.types[x].entries.length; y++){
                    if($scope.types[x].entries[y].name.indexOf($scope.filterText) !== -1){
                       entries.push($scope.types[x].entries[y]);   
                    }                        
                }
                if(entries.length > 0){
                    $scope.filteredTypes.push({
                        name: $scope.types[x].name,
                        entries: entries
                    });
                }
            }
        }
           // $scope.filteredTypes = $scope.types;
    }
    $scope.updateTypes();
}