title: How do I make an ngClass reactive to array membership in Angular?
body: <p>I'm trying to make a list class reactive to whether that list member's ID is in an array.  I could handle that with a function in the controller, but that doesn't automatically update the class if the array changes.</p>
  
  <p>Here is a plunker representing my problem, I want all the ids in <code>$scope.redIds</code> to be red.
  <a href="http://plnkr.co/edit/rl8WWgTRnksDkEddmhj9" rel="nofollow">http://plnkr.co/edit/rl8WWgTRnksDkEddmhj9</a></p>
  
  <p>Code below:</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Example - example-ngController-production&lt;/title&gt;
  
  
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
  
    &lt;style&gt;
      .red {
        background-color: red;
      }
    &lt;/style&gt;
  
  
  &lt;/head&gt;
  &lt;body ng-app="controllerExample"&gt;
    &lt;div ng-controller="controller"&gt;
      &lt;!-- 1 and 4 should be red --&gt;
      &lt;div ng-repeat="id in ids"&gt;
  
        &lt;span ng-class="id in redIds ? 'red' : ''"&gt;ID: {{id}}&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>(function(angular) {
  angular.module('controllerExample', [])
    .controller('controller', ['$scope', controller]);
  
  function controller($scope) {
    $scope.ids = [1,2,3,4];
    $scope.redIds = [1,4];
  }
  })(window.angular);
  </code></pre>
  
  <p>Thank you!</p>
  
  <p><strong><em>EDIT</em></strong>
  Plunker has been updated with working solution:
  <a href="http://plnkr.co/edit/rl8WWgTRnksDkEddmhj9" rel="nofollow">http://plnkr.co/edit/rl8WWgTRnksDkEddmhj9</a></p>