title: Navigate the UI using keyboard
body: <p>Consider the following markup -</p>
  
  <pre><code>&lt;ul id="list"&gt;
      &lt;li class="list-item" tabindex="0"&gt;test 1&lt;/li&gt;
      &lt;li class="list-item" tabindex="1"&gt;test 2&lt;/li&gt;
      &lt;li class="list-item" tabindex="2"&gt;test 3&lt;/li&gt;
      &lt;li class="list-item" tabindex="3"&gt;test 4&lt;/li&gt;
      &lt;li class="list-item" tabindex="4"&gt;test 5&lt;/li&gt;
      &lt;li class="list-item" tabindex="5"&gt;test 6&lt;/li&gt;
      &lt;li class="list-item" tabindex="6"&gt;test 7&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and this piece of jQuery code -</p>
  
  <pre><code>$(".list-item").bind({
      keydown: function(e) {
          var key = e.keyCode;
          var target = $(e.currentTarget);
  
          switch(key) {
              case 38: // arrow up
                  target.prev().focus();
                  break;
              case 40: // arrow down
                  target.next().focus();
                  break;
          }
      },
  
      focusin: function(e) {
          $(e.currentTarget).addClass("selected");
      },
  
      focusout: function(e) {
          $(e.currentTarget).removeClass("selected");
      }
  });
  $("li").first().focus();
  </code></pre>
  
  <p>How do I port this code in angular? I have this so far -</p>
  
  <pre><code> &lt;li class="list-item" ng-repeat="item in items" tabindex="{{item.tabIndex}}"&gt;
                          {{item.name}}
                      &lt;/li&gt;
  </code></pre>
  
  <p>How do I do the binding in angular?</p>