How to Chain multiple custom filters with AngualrJS
<p>How can i chain multiple filters using AngularJS. My case is i have 3 dropdown menu i want to use as filters to filter out data in a table. I just created a plunk to demonstrate what i want to acchieve, here is the URL of my <a href="http://plnkr.co/edit/EdGutDSXilkjyMqB2pxH" rel="nofollow noreferrer">plunk</a></p>

<p>Filtering is working, but not giving the correct result based on what i select i dropdowns to filter on.</p>

<p>HTML</p>

<pre><code>&lt;select ng-model="filterItem.Org"&gt;
   &lt;option value=""&gt;Filter on Org&lt;/option&gt;
  &lt;option value="org1"&gt;org1&lt;/option&gt;
  &lt;option value="org2"&gt;org2&lt;/option&gt;
  &lt;option value="org3"&gt;org3&lt;/option&gt;
&lt;/select&gt;
 &lt;select ng-model="filterItem.Period"&gt;
   &lt;option value=""&gt;Filter on Period&lt;/option&gt;
  &lt;option value="2017"&gt;2017&lt;/option&gt;
  &lt;option value="2018"&gt;2018&lt;/option&gt;
&lt;/select&gt;
&lt;select ng-model="filterItem.ActionPlan"&gt;
  &lt;option value=""&gt;Filter on ActionPlan&lt;/option&gt;
  &lt;option value="Plan1"&gt;Plan1&lt;/option&gt;
  &lt;option value="Plan2"&gt;Plan2&lt;/option&gt;
  &lt;option value="Plan3"&gt;Plan3&lt;/option&gt;
  &lt;option value="Plan4"&gt;Plan4&lt;/option&gt;
&lt;/select&gt;&lt;br&gt;&lt;br&gt;

&lt;table id="actionPlans" &gt;
&lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;Title&lt;/th&gt;
      &lt;th&gt;Period&lt;/th&gt;
      &lt;th&gt;AssociatedPlan&lt;/th&gt;
      &lt;th&gt;Organization&lt;/th&gt;
   &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
    &lt;tr ng-repeat="actionPlan in actionPlans | filter:customFilter"&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;{{actionPlan.Title}}&lt;/td&gt;
     &lt;td&gt;{{actionPlan.Period}}&lt;/td&gt;
     &lt;td&gt;{{actionPlan.ActionPlan}}&lt;/td&gt;
     &lt;td&gt;{{actionPlan.Org}}&lt;/td&gt;
    &lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt; 
</code></pre>

<p>Javascript Controller:</p>

<pre><code>var app = angular.module('drpFiltering', []);
app.controller('MainCtrl', function($scope) {
 $scope.name = 'Dropdown filtering';
$scope.actionPlans = [
    {
        Org: 'org1',
        Title: 'Gjennomføre julebord',
        Period: '2017',
        ActionPlan: 'Kommunedelplan Helse',

    },
    {
        Org: 'org1',
        Title: 'Gjennomføre medarbeiderundersøkelse',
        Period: '2017',
        ActionPlan: 'Handlingsprogram 2017-2020',

    }
   ,
    {
        Org: 'org2',
        Title: 'God økonomistyring',
        Period: '2018',
        ActionPlan: 'Detaljprogram Helse',

    },
     {
        Org: 'org2',
        Title: 'Kjøre medarbeiderundersøkelse',
        Period: '2018',
        ActionPlan: 'Kommunedelplan Helse',

    }
     ,{
        Org: 'org2',
        Title: 'Gjennomføre medarbeiderundersøkelse ',
        Period: '2017',
        ActionPlan: 'Temaplan Helse',

    }
    , {
        Org: 'org3',
        Title: 'Korrupsjonsforebyggende opplæring',
        Period: '2017',
        ActionPlan: 'plan2',

    },
    {
       Org: 'org3',
        Title: 'opplæring',
        Period: '2018',
        ActionPlan: 'plan3',

    },
    {
        Org: 'org1',
        Title: 'opplæring',
        Period: '2018',
        ActionPlan: 'plan4',

    }
];
$scope.customFilter = function (data) {
    if ($scope.filterItem !== undefined) {
        if ($scope.filterItem.Org === data.Org) {
          return true;
        } 
        if ($scope.filterItem.Period === data.Period) {
          return true;
        }
        if ($scope.filterItem.ActionPlan === data.ActionPlan) {
           return true;
        } 
        else{
          return false;
        }  
    }
 };
});
</code></pre>

<p>Any help with this will be realy apprissiated.</p>