Angular apply style to the first visible item in ngRepeat - css

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

Answer 3

Pure Angular Way would be:
<ul class="list-group">
<li class="list-group-item" ng-repeat="data in tree | filter:key track by $index" ng-class="{MyClassName: $index == 0}">
{{data.name}}
</li>
</ul>
or see answer of Sasi Kiran ;)

Answer 4

You can use the $index variable value to do such conditional formatting within ng-repeat. Here's an example:
<ul class="list-group">
<li class="list-group-item"
ng-repeat="data in tree | filter:key"
ng-class="{'first-item': $index == 0}">
{{data.name}}
</li>
</ul>

Answer 5

Use $first and ng-class. $first is a property which is exposed on the local scope, for each item in the repeated list. It's value is true if the item is the first one in the repeated list. The HTML should look something as below:
<ul class="list-group">
<li class="list-group-item" ng-repeat="data in tree | filter:key" ng-class="{'.first-item': $first}">
<div>{{data.name}}</div>
</li>