title: Use AngularJS directive to change classes of ng-repeat elements
body: <p>I am trying to conditionally change the class of an element that is nested in an unordered list. </p>
  
  <p>When not using <code>ng-repeat</code> to create the list, I can use the jqlite selector <code>.children()</code> to find the correct element and change the class.</p>
  
  <p>However I am using <code>ng-repeat</code> to create the list and I can't figure out how to access the specific list element that I want. <code>.children()</code> always returns undefined.</p>
  
  <p>here is a jsfiddle of what I am trying to do
  <a href="http://jsfiddle.net/whitehead1415/ENtTC/3/" rel="nofollow noreferrer">http://jsfiddle.net/whitehead1415/ENtTC/3/</a></p>
  
  <pre><code>app.directive('myDirective1', function () {
      return {
          restrict: 'A',
          link: function ($scope, element, attrs, controller) {
              //for some reason element.children()[0] is undefined
              //why? what can I do about it?
              angular.element(element.children()[0]).css('background', 'grey')
          }
      };
  });
  </code></pre>
  
  <p>I need to be able to change the class based on 2 things </p>
  
  <ol>
  <li>when the user clicks on the specific element the element needs to highlight</li>
  <li>when the user clicks on a button that is the next element will be highlighted (that button isn't included in the jsfiddle)</li>
  </ol>
  
  <p>I thought about putting the directive on each list element, but the only problem is that I don't know how to make them all aware of each other so only one element is highlighted at a time</p>