title: How to use a dynamic value with ngClass
body: <p>I'm trying to apply a class name that's the same as a scope variable.</p>
  
  <p>For example:</p>
  
  <p><code>&lt;div ng-class="{item.name : item.name}"&gt;</code></p>
  
  <p>So that the value of <code>item.name</code> is added to the class.  This doesn't seem to do anything though.  Any suggestions on how to do this?</p>
  
  <p>Thanks!</p>
  
  <p>EDIT:</p>
  
  <p>This is actually being done within a select, using ng-options.  For example:</p>
  
  <p><code>&lt;select ng-options="c.code as c.name for c in countries"&gt;&lt;/select&gt;</code></p>
  
  <p>Now, I want to apply a class name that has the value of <code>c.code</code></p>
  
  <p>I found the following directive, which seems to work, but not with interpolation of the value:</p>
  
  <pre><code>angular.module('directives.app').directive('optionsClass', ['$parse', function ($parse) {
    'use strict';
  
    return {
      require: 'select',
      link: function(scope, elem, attrs, ngSelect) {
        // get the source for the items array that populates the select.
        var optionsSourceStr = attrs.ngOptions.split(' ').pop(),
        // use $parse to get a function from the options-class attribute
        // that you can use to evaluate later.
            getOptionsClass = $parse(attrs.optionsClass);
  
        scope.$watch(optionsSourceStr, function(items) {
          // when the options source changes loop through its items.
          angular.forEach(items, function(item, index) {
            // evaluate against the item to get a mapping object for
            // for your classes.
            var classes = getOptionsClass(item),
            // also get the option you're going to need. This can be found
            // by looking for the option with the appropriate index in the
            // value attribute.
                option = elem.find('option[value=' + index + ']');
  
            // now loop through the key/value pairs in the mapping object
            // and apply the classes that evaluated to be truthy.
            angular.forEach(classes, function(add, className) {
              if(add) {
                angular.element(option).addClass(className);
              }
            });
          });
        });
      }
    };
  
  }]);
  </code></pre>