angularjs - Dynamic class name ngRepeat root element -

i trying use model add class names each root element of ngrepeat. need each li have unique class name. there anyway this?

class="{{item.clazz}}"

<nav id="main-menu">     <ul>         <li ng-repeat="item in menus[0].items" class="{{item.clazz}}">             <a class="dropdown-toggle" href="#" slidedown-toggle><i class="{{item.icon}}"></i><span>{{item.name}}</span></a>             <ul class="dropdown-menu">                 <li ng-repeat="link in item.items[0].items">                     <a href="{{link.link}}">{{link.name}}</a>                 </li>             </ul>         </li>     </ul> </nav>   items: [{             title: 'about us',             icon: 'icon-about',             clazz: 'about-us-menu',             items: [{                 name: 'who we?',                 icon: '',                 link: '#'             }, {                 name: 'our partners',                 icon: '',                 link: '#'             }, {                 name: 'careers',                 icon: '',                 link: '#'             }, {                 name: 'stuff cms',                 icon: '',                 link: '#'             }]         }] 

looking @ code have clazz on top level object ng-repeat looking @ item.clazz return undefined.

so either items array objects should similar to:

items: [{         name: 'who we?',             icon: '',             link: '#',             clazz: 'unique-class-name'         }, {             name: 'our partners',             icon: '',             link: '#',             clazz: 'unique-class-name'         }] 

or if want 'about-us-menu' class applied li use following:

<li ng-repeat="item in menus[0].items" class="{{menus[0].clazz}}">