title: Angular.js targeting ng-class for dom manipulation
body: <p>I have a directive for mobile navigation which toggles a <code>&lt;ul&gt;</code> on click.</p>
  
  <p>The directive works well; however, when I use a class, but I am no longer able to target the class with jquery when switched to ng-class.</p>
  
  <p>Here is my template.</p>
  
  <pre><code>&lt;ul ng-repeat="list in englishList"&gt;
  
  &lt;a ng-class="{{list.title}}Hide" mobile-search-slide href="/about"&gt;&lt;li&gt;&lt;p&gt;{{list.title}}&lt;/p&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/li&gt;&lt;/a&gt;
  
  &lt;ul id="hideMe" ng-class="hideAbout"&gt;           
  &lt;div ng-cloak ng-repeat="(key, value) in searchData | aboutFilter:'abo'"&gt;
  
   &lt;div ng-repeat="result in value" ng-class-odd="'odd'" ng-class-even="'even'"&gt;
     &lt;a ng-href="{{value.title}}/{{result.shortname}}"&gt;
     &lt;li&gt;&lt;p&gt;{{result.title}}&lt;/p&gt;&lt;i class="fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/li&gt;
  
     &lt;/a&gt;
     &lt;/div&gt;  
  &lt;/div&gt; 
  &lt;/li&gt;
  &lt;/ul&gt;
  
   &lt;/ul&gt; 
  </code></pre>
  
  <p>This line is has the class, which I'd like to target:</p>
  
  <pre><code>&lt;ul id="hideMe" ng-class="hideAbout"&gt; 
  </code></pre>
  
  <p>Here is the mobile-search-slide directive:</p>
  
  <pre><code>app.directive('mobileSearchSlide', function(){
  return{
    restrict: "A",
    link: function(scope, element, attrs) {
        element.click(function(){
  
          $('.hideAbout').slideToggle();
  
          console.log(element);
        });
  
      }
  }
  });
  </code></pre>
  
  <p>I plan on using ng-class as <code>&lt;ul id="hideMe" ng-class="hide{{list.title}}"&gt;</code> </p>