javascript - filter angular js array by multiple columns and values -

i trying filter angular js array using multiple columns .

e.g | filter:{sender: 'fred', reciever: 'josh'} | filter:{sender: 'josh', reciever: 'fred'}

but doesn't seem work, please view complete code below

      <div ng-repeat="msg in messages | filter:{sender: 'fred', reciever: 'josh'} | filter:{sender: 'josh', reciever: 'fred'}">        sender : {{ msg.sender }} msg : {{ msg.msg }} reciever : {{ msg.reciever }}       </div>        </div>        <script>       var app = angular.module('myapp', []);       app.controller('myctrl', function($scope) {           $scope.messages = [       {sender:'fred', reciever:'josh', msg:'hi'},       {sender:'josh', reciever:'fred', msg:'i dey'},        {sender:'fred', reciever:'josh', msg:'hello'}       ];       });       </script> 

here js fiddle https://jsfiddle.net/c8uvrbvj/

i prefer filter messages in controller. dom filters can cause performance problems. see: using controller $filters prevent $digest performance issues

but works:

var app = angular.module('myapp', []);  app.controller('myctrl', function($scope) {      $scope.messages = [          {sender:'fred', receiver:'josh', msg:'hi'},          {sender:'josh', receiver:'fred', msg:'i dey'},           {sender:'josh', receiver:'racheal', msg:'hw re u2?'},          {sender:'barack', receiver:'angela', msg:'dear'},           {sender:'fred', receiver:'josh', msg:'hello'},           {sender:'angela', receiver:'barack', msg:'moin'},          {sender:'josh', receiver:'racheal', msg:'hw re u?'}      ];  }).filter('myfilter', function() {    return function(input, filter) {      return input.filter(function(e1){        return filter.find(function(e2) {            return e1.sender === e2.sender && e1.receiver === e2.receiver;        });      });    };  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="myapp" ng-controller="myctrl">    <div ng-repeat="msg in (messages | myfilter:[{sender: 'fred', receiver: 'josh'},{sender: 'josh', receiver: 'fred'}])">    sender : {{ msg.sender }} msg : {{ msg.msg }} reciever : {{ msg.reciever }}  </div>    </div>

it follows solution without dom filtering, think better approach:

    var app = angular.module('myapp', []);            function filter(input, filter) {          return input.filter(function(e1){              return filter.find(function(e2) {                  return e1.sender === e2.sender && e1.receiver === e2.receiver;              });          });      }            app.controller('myctrl', function($scope) {                    var messages = [              {sender:'fred', receiver:'josh', msg:'hi'},              {sender:'josh', receiver:'fred', msg:'i dey'},              {sender:'josh', receiver:'racheal', msg:'hw re u2?'},              {sender:'barack', receiver:'angela', msg:'dear'},              {sender:'fred', receiver:'josh', msg:'hello'},              {sender:'angela', receiver:'barack', msg:'moin'},              {sender:'josh', receiver:'racheal', msg:'hw re u?'}          ];          var name1 = 'fred';          var name2 = 'josh';          var myfilter = [{sender: name1, receiver: name2},{sender: name2, receiver: name1}];            $scope.messages = filter(messages, myfilter);      });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="myapp" ng-controller="myctrl">        <div ng-repeat="msg in messages">            sender : {{ msg.sender }} msg : {{ msg.msg }} reciever : {{ msg.reciever }}      </div>    </div>