 <p>Here is the example what you could choose to do: <a href="http://plnkr.co/edit/XRGPYCk6auOxmylMe0Uu?p=preview">http://plnkr.co/edit/XRGPYCk6auOxmylMe0Uu?p=preview</a></p> <pre><code>&lt;body key-trap&gt; &lt;div ng-controller="testCtrl"&gt; &lt;li ng-repeat="record in records"&gt; &lt;div class="record" ng-class="{'record-highlight': record.navIndex == focu sIndex}"&gt; {{ record.name }} &lt;/div&gt; &lt;/li&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>This is the simplest approach I could think of. It binds a directive <code>keyTrap</code> to the <code>body</code> which catches the <code>keydown</code> event and <code>$broadcast</code> message to child scopes. The element holder scope will catch the message and simply increment or decrement the focusIndex or fire an <code>open</code> function if hitting <code>enter</code>.</p> <h1>EDIT</h1> <p><a href="http://plnkr.co/edit/rwUDTtkQkaQ0dkIFflcy?p=preview">http://plnkr.co/edit/rwUDTtkQkaQ0dkIFflcy?p=preview</a></p> <p>now supports, ordered / filtered list.</p> <p>Event handling part has not changed, but now uses <code>$index</code> and also filtered list caching technique combined to track which item is getting focused.</p>