title: angularjs: loop through an array crossing values with another array in a view
body: <p>I am struggling with the following. I have a global array1 with the values FileA, FileB, FileC, FileD and FileE. Then I have a specific array2 with the values FileA and FileC.</p>
  
  <p>The output I would want is something like</p>
  
  <pre><code>&lt;div class="matched"&gt;FileA&lt;/div&gt;
  &lt;div class="not_matched"&gt;FileB&lt;/div&gt;
  &lt;div class="matched"&gt;FileC&lt;/div&gt;
  &lt;div class="not_matched"&gt;FileD&lt;/div&gt;
  &lt;div class="not_matched"&gt;FileE&lt;/div&gt;
  </code></pre>
  
  <p>I was thinking in a nested ng-repeat with a custom filter, but I am not able to see how to do it. </p>
  
  <p>Here it is an attempt that is not even compiling</p>
  
  <p>html</p>
  
  <pre><code>&lt;body ng-app="myModule"&gt;
  &lt;div ng-controller="myController"&gt;
      &lt;div ng-repeat="entity in entities"&gt;
          &lt;div ng-repeat="myEntity in myEntities |  lookInside(entity)"&gt;
              {{myEntity.match}} - {{myEntity.name}}
          &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and js</p>
  
  <pre><code>var myModule = angular.module('myModule', []);
  
  myModule.controller('myController', ['$scope',  function($scope) {
      $scope.entities = ['fileA', 'fileB', 'fileC', 'fileD', 'fileE'];
      $scope.myEntities = ['fileA', 'fileC'];
  }]);
  
  myModule.filter('lookInside', function(){
      return function(items, name){
          var arrayToReturn = [];
          var name = {};
          for (var i=0; i&lt;items.length; i++){
              name.match = 'no';
              name.name = items[i];
              if (items[i] == name) {
                  name.match = 'si';
              }
              arrayToReturn.push(name);
          }
          return arrayToReturn;
      };
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/C5gJr/46/" rel="nofollow">http://jsfiddle.net/C5gJr/46/</a></p>
  
  <p>What's the best approach to follow here?</p>
  
  <p>Cheers</p>
  
  <p>UPDATE:
  I've solved just by using a filter for each entry that checks if it is inside the array</p>
  
  <pre><code>&lt;body ng-app="myModule"&gt;
  &lt;div ng-controller="myController"&gt;
      &lt;div ng-repeat="entity in entities"&gt;
         {{entity | lookInside: myEntities}}
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and js</p>
  
  <pre><code>var myModule = angular.module('myModule', []);
  
  myModule.controller('myController', ['$scope',  function($scope) {
      $scope.entities = ['fileA', 'fileB', 'fileC', 'fileD', 'fileE'];
      $scope.myEntities = ['fileA', 'fileC'];
  }]);
  
  myModule.filter('lookInside', function(){
      return function(item, array){
          var name = 'no';
          for (var i=0; i&lt;array.length; i++){
              if (array[i] == item) {
                  name = 'si';
              }
          }
          return name;
      };
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/C5gJr/48/" rel="nofollow">http://jsfiddle.net/C5gJr/48/</a></p>
  
  <p>However, the impact in the performance of the data processing is very high (large lists of data). This may be unavoidable, but any comment on that is very well welcomed.</p>
  
  <p>Cheers</p>