Angular apply style to the first visible item in ngRepeat

Question

I have a list generated by ngRepeat, like so

<ul class="list-group">
    <li class="list-group-item" ng-repeat="data in tree | filter:key">
        {{data.name}}
    </li>
</ul>

and I want the first item in the list to have rounded corners. I have a style such as

.first-item {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

How can I cause this style to be applied to the first visible item? Note that the key is connected to a search box, so the first item is dynamic.

Answer 1

use $first, that represents the first iteration within a ng-repeat

<ul class="list-group">
    <li ng-class="{'first-item':$first}"
class="list-group-item" ng-repeat="data in tree | filter:key">
        {{data.name}}
    </li>
</ul>      

edit: since first-item has a dash, it must be in quotes

Answer 2

You can use the css rule first-child:

.list-group li:first-child { 
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
}

http://www.w3schools.com/cssref/sel_firstchild.asp