angularjs - How to add a directive onto a node in an ng-repeat only once -

i have feature tour directive similar joyride works adding directive onto dom element highlights element during user walk through. example:

<button test-drive-step          test-drive-text="to activate search click here"          test-drive-next-label="next">search</button> 

my question if want place on list of elements , point out single element using feature how that? example if node wanted place test-drive-step directive on in ng-repeat how limit directive 1 element out of items rather all?

for example,

<li ng-repeat="item in items" test-drive-step ...>{{item.name}}</item> 

that place test-drive-step directive on every element in items, want on first element. how limit first element?

one option pass in conditional directive, telling whether apply itself.

for example can use $index === 0 test whether on first ng-repeat element ($index being ng-repeat element on). so

<li ng-repeat="item in items" test-drive-step="$index === 0" ...>{{item.name}}</item> 

and add directive scope:

scope: {     test-drive-step: '='  }, 

so directive can apply if attribute true:

link: function(scope, element, attr) {          if (scope.test-drive-step)              element.addclass('blue');  // or whatever... } 

here's fiddle showing concept: http://jsfiddle.net/6sc0acoa/2/