Here is a new updated plunker I created specifically for your issue.
In the future, please try to condense your example plunker to focus only on the specific problem at hand as it makes it easier for us to assist you.
Initially, I integrated the search binding as a filter within the ng-repeat directive to enable the filter function:
<div ng-repeat="subCategory in subCategorys | filter:{tags:tag}:true | filter:{id:search} | orderBy:'id'">
To prevent executing the filter multiple times, you can directly save the filtered result into a scope variable by assignment (as shown in my example with subCategorysFilter):
<div ng-repeat="subCategory in subCategorysFilter = (subCategorys | filter:{tags:tag}:true | filter:{id:search} | orderBy:'id')">
I also revised your getAllFilteredNames()
method to accept a filter object as input, iterate through the results, create an array of names, and join them using a comma as a separator:
$scope.getAllFilteredNames = function(filter){
var names = [];
angular.forEach(filter, function(element){
names.push(element.name);
});
return names.join(", ");
};
This function is now called outside of the ng-repeat directive:
You are now viewing details of {{getAllFilteredNames(subCategorysFilter)}}
Enjoy experimenting!
Additional Update
For displaying multi-line output, consider these two options:
1 - Modify the line
<div>You are now viewing details of {{getAllFilteredNames(subCategorysFilter)}}</div>
to
<div>You are now viewing details of <span ng-bind-html="getAllFilteredNames(subCategorysFilter)"></span></div>
This allows html tags within the expression to be interpreted as html code. However, Angular typically disables this feature for valid reasons. If users can edit the objects, precautions must be taken to prevent design disruptions caused by escaped html tags...
2 - If consolidating information in a single string isn't necessary, utilize another ng-repeat along with a <ul>
like so:
<div>You are now viewing details of <br/>
<ul>
<li ng-repeat="subCategory in subCategorysFilter">{{subCategoryName}}</li>
</ul>
</div>
Style your li
elements accordingly to display vertically aligned and you're good to go.