Data displayed only on taping the screen


#1

I am using collection repeat for displaying a list of data and using a custom filter in it.Everything works fine but when i come back from the second page, the data is not rendered until i make a contact to the screen.Here is my code,

.filter('customFilter', function () {
 return function (arr,searchString) {
 var names = [];
 var ans = [];
 var item = {};
 
 if(!searchString){
        return arr;
    }
 searchString = searchString.toLowerCase();
    angular.forEach(arr, function(item){
    if(item.name.toLowerCase().indexOf(searchString) !== -1){
      names.push(item);
    }
   else{ 
    if(item.metadata.toLowerCase().indexOf(searchString) !== -1){
        ans.push(item);
      }
    }
    });

if(names.length!=0)
{
  item['name']='<font color="black"><b>Most relevant results</b</font>'
  names.splice(0,0,angular.copy(item));
}
if(ans.length!=0)
{
  item['name']='<font color="black"><b> Other relevant results</b></font>'
  ans.splice(0,0,angular.copy(item));
}
return names.concat(ans);
};
})

The Html code

<div>
<ul class="list">
      <li class="item item-text-wrap" collection-repeat="item in searchJson| customFilter:search.value" >
      <div class="row row-center row-height">
      <font class="text_color">
        <span ng-bind-html="highlight(item.name, search.value)"></span>
      </font>
      </div>
      </li>
</ul>