JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.0.0rc4/angular-1.0.0rc4.min.js"></script>
<div ng:app="myApp">
 <div ng-controller="HelloCntl">
    <p id="id4" class="textType">
	    <label for="" class="textType">Filter:</label>
		<input type="text" ng-model="personFilter"  id="" class="textType" value="" /> 
</p>
 <ul>
    <li ng-repeat="friend in friends | filter:personFilter">
        <span>{{friend.name}}</span>
        <span>{{friend.phone}}</span>
        <span>{{friend.items | GetItemsTitels}}</span>
    </li>
 </ul>
 </div>
</div>

CSS

span
{
 width: 200px;   
}

JavaScript

angular.module('myApp',[])
   .filter('GetItemsTitels', function(){
    
    return function(items){
        
        var strToReturn = "";
        for (var i=0; i<items.length; i++){
            strToReturn += allItems[items[i]] + ','; 
        }
        
        return strToReturn;
    };
});
var allItems = {
    'id0' : 'aaa',
    'id1' : 'aab',
    'id2' : 'aba',
    'id3' : 'abb',
    'id4' : 'baa',
    'id5' : 'bab',
    'id6' : 'bba',
    'id7' : 'bbb'    
};

function HelloCntl($scope) {
    $scope.friends = [
        {
        name: 'John',
        phone: '555-1276',
        items : ['id0', 'id1']
     },
    {
        name: 'Mary',
        phone: '800-BIG-MARY',
        items : ['id1', 'id2']            
        },
    {
        name: 'Mike',
        phone: '555-4321',
        items : ['id2', 'id3']            
       },
    {
        name: 'Adam',
        phone: '555-5678',
        items : ['id3', 'id4']            
        },
    {
        name: 'Julie',
        phone: '555-8765',
        items : ['id4', 'id5']            
    }
    ];
}