Angular fiddle

by Michael Bazos

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
<div ng-app="demoApp" ng-controller="DemoController">
    <div>Search <input type="text" ng-model="searchText"/></div>
    <div ng-repeat="api in englishList">
        <p>{{api}}</p>
        <div ng-repeat="result in searchData[api] | filter: searchText" >
            <li>{{result.title}}, {{result.shortname}}</li>
        </div>
    </div>
</div>

CSS

p {
    font-weight: bold;
}

JavaScript

var demoApp = angular.module('demoApp', []);

demoApp.controller('DemoController', function ($scope) {

    $scope.englishList = ["abo", "ser", "vol", "con"];;

    $scope.searchData = {
        abo: [{
            title: 'title abo',
            shortname: 'shortname abo'
        }],
        ser: [{
            title: 'title ser 1',
            shortname: 'shortname ser 1'
        }, {
            title: 'title ser 2',
            shortname: 'shortname ser 2'
        }],
        vol: [{
            title: 'title vol',
            shortname: 'shortname vol'
        }],
        con: [{
            title: 'title con',
            shortname: 'shortname con'
        }]
    };

});