angularjs - How do I use ng-class without ng-repeat? -

i relatively new angularjs , loving every moment of it! have unordered list of products. when user hovers on them, need list element have active class set on them. doing way:

<ul>     <li ng-repeat="product in products" ng-mouseover="showdetails(product, $event)" ng-class="{active: current == product}">{{product}}</li> </ul> 

and showdetails follows:

function showdetails(product, $event) {     $scope.current = product;     ...some other logic... } 

now, working fine, however, wondering if possible set class without ng-repeat , having no product variable bind to?

<ul>     <li ng-mouseover="showdetails($event)" ng-class="{<i don't know put here> }">foo</li>     <li ng-mouseover="showdetails($event)" ng-class="{<i don't know put here> }">bar</li>     <li ng-mouseover="showdetails($event)" ng-class="{<i don't know put here> }">a</li>       <li ng-mouseover="showdetails($event)" ng-class="{<i don't know put here> }">b</li> </ul> 

how should write showdetails function set class time? first try is:

function showdetails($event) {     var text = $event.target.textcontent;     $scope.current = text } 

but do in ng-class attribute?

if pure css solution not possible can create directive , toggle css class using jquery within directive. apply directive on ul attribute or class. in directive can do

ielement.find("li").hover(...