title: AngularJS Filter Hide Item If It Exists In Another Array
body: <p>I have two arrays:</p>
  
  <pre><code>$scope.arr1 = [1, 2, 3];
  $scope.arr2 = [2, 3, 4];
  </code></pre>
  
  <p>I'm trying to:</p>
  
  <ul>
  <li>ng-repeat through <code>arr1</code></li>
  <li>Use a custom filter to only show items from <code>arr1</code> that aren't in <code>arr2</code></li>
  <li>The output should be <code>1</code></li>
  </ul>
  
  <p>Here's my view:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li ng-repeat="item in arr1 | matcher"&gt;
      {{item}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's my controller:</p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.filter('matcher', function () {
    for (var i = 0; i &lt; $scope.arr1.length; i++) {
      for (var j = 0; j &lt; $scope.arr2.length; j++) {
        if ($scope.arr1[i] != $scope.arr2[j])  {
          return $scope.arr1[i];
        }
      }
    }
  });
  
  app.controller('MainCtrl', function($scope) {
    $scope.arr1 = [1, 2, 3];
    $scope.arr2 = [2, 3, 4];
  });
  </code></pre>
  
  <p>Here's my Plunker:
  <a href="http://plnkr.co/edit/Pd3QwMMNfmL62vvdD1kW?p=preview" rel="nofollow">http://plnkr.co/edit/Pd3QwMMNfmL62vvdD1kW?p=preview</a></p>
  
  <p>Any idea how to get this custom filter working?</p>