Can't navigate through drop-down menu if using ng-repeat

Question

I have this drop-down menu that I populate using ng-repeat:

<div class="btn-group btn-xs" dropdown keyboard-nav>
  <input id="simple-btn-keyboard-nav" ng-model="available_fields_query" id="single-button" dropdown-toggle ng-disabled="disabled" placeholder="Add New Field">
  </input>
  <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">
    <li ng-repeat="item in availableFields">
      <a ng-click="addField(item)" role="menuitem">{{item}}</a>
    </li>
  </ul>
</div>

And I supposed to be able to navigate through it with kb arrows, but for some reason I can't focus it with tab or arrows.

But If I manually do something like this:

<div class="btn-group" dropdown dropdown-append-to-body>
      <button id="btn-append-to-body" type="button" class="btn btn-primary" dropdown-toggle>
        Dropdown on Body <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
        <li role="menuitem"><a href="#">Action</a></li>
        <li role="menuitem"><a href="#">Another action</a></li>
        <li role="menuitem"><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li role="menuitem"><a href="#">Separated link</a></li>
      </ul>
    </div>

It works fine, and I can target fields in a dropdown with my keyboard.

Why this is happening and how can I fix it?

$scope.addField = function (value) {
            $scope.state_from_editor.fields.push(value);
        };

Answer 1

Well it wasn't working because <a> attribute was missing href parameter, as soon as I added href="#" it started to work.