add class to first item in ng-repeat with jquery

Question

I am new to complex directives and am trying to add a class to the first item in an ng-repeat with jquery (unfortunately my project is using it) like so inside a directive's controller:

   var highlightFirst = function(){
      $('.pointer').find('.fa-angle-down-first').next().addClass('boldit');
      console.log('in here')
    }

    highlightFirst();

    //also tried this:
    angular.element(document).ready(function(){
      $('.pointer').find('.fa-angle-down-first').next().addClass('boldit');
      console.log('in here')
    });

I invoke the function right after. nothing happens.

when I run $('.pointer').find('.fa-angle-down-first').next().addClass('boldit'); in chrome dev tools, what I want to be bolded is in fact bolded...what am I missing to get this specific solution working? and what is the best angular way to do this?

Answer 1

You don't actually need jquery for it and should avoid using jquery as much as possible in angular applications, you should use ng-class and $first here's the working demo

<ul>
    <li ng-repeat="item in items" ng-class="{'fooClass': $first}">{{ item }}</li>
</ul>

The good thing about $first is when you sort the ng-repeat it would still work correctly.