$ rootScope: infdig error caused by filter

Question

I use ng-repeat to print a list of items and use a special filter to perform some operations. HTML code

<ul class="list">
      <li class="item item-text-wrap" ng-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>

CustomFliter

.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);
      }
    }
    });
//want to add a header for names
if(names.length!=0)
{
  item['name']='<font color="black"><b>Most relevant results</b</font>'
  names.splice(0,0,angular.copy(item));

}
//want to add a header for questions
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);
};
})

Everything works fine without a splice condition (ng-repeat). If there is a splice, I get the error $ rootScope.infdig. I went through these links https://docs.angularjs.org/error/ $ rootScope / infdig https://docs.angularjs.org/api/ng/provider/ $ rootScopeProvider

It is very clear that we cannot add elements during the digest cycle. Is there a way to add a title dynamically. Can anyone help with this issue.

collection-repeat, , , , , . ???