title: Angularjs directive - select next element by a class name
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;input type="text" ng-model="search.q" special-input&gt;
    &lt;ul class="hidden"&gt;...&lt;/ul&gt;
    &lt;ul class="hidden bonus"&gt;...&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the following directive:</p>
  
  <pre><code>myApp.directive('specialInput', ['$timeout', function($timeout)
  {
    return {
      link: function(scope, element) {
        element.bind('focus', function() {
          $timeout(function() {
            // Select ul with class bonus
            element.parent().find('.bonus').removeClass('hidden');
          });
        });
      }
    }
  }]);
  </code></pre>
  
  <p>I want to select the ul.bonus using jqLite but cannot find a way. I tried with .next(".bonus") but the selector is ignored completely and the first ul is selected. Does anyone have an idea why I can't do this?</p>
  
  <p>P.S. I'm just relying on AngularJS internal jqLite without jQuery.</p>
  
  <p>Thanks!</p>