Search and Filter on More than one model in angularjs

Question

I create a sample app here. my app have 2 array of object in scope with name of data and data2 . also i have 2 directive :

app.directive('root',function(){
return {
scope:{
  items:'='
},
restrict:'AE',
template:'<ul><li>Item<ul><li ng-repeat="item in items"><show-item mo="item"></show-item>l</li></ul></li></ul>'
  };
});
 app.directive('showItem',function(){
return {
restrict:'EA',
scope:{
  mo:'='
},
controller:function(){

},
template:'<span>{{mo.name}}</span>'
};
});

i have one input search for searching by name in models . but how do i search on these two model by same query in one input

Answer 1

Attach a model to your search input:

<input type="search" ng-model="search" />

Add two-way binding for this model on your directives' scope and use it to filter your ng-repeat items:

<root items="data" search="search"></root> 
<root items="data2" search="search"></root>

and

app.directive('root',function(){
  return {
    scope:{
      items:'=',
      search:'='
    }, 
    restrict:'AE',
    template:'<ul><li>Item<ul><li ng-repeat="item in items | filter:search"><show-item mo="item"></show-item>l</li></ul></li></ul>'
  };
});

Updated JS Bin