AngularJS: Why can't I select through my autocomplete list from a text box with my arrow keys?

Question

I'm following a code found in AngularJS API documentation for "typeahead": http://angular-ui.github.io/bootstrap/

I am able to fill the text box with the first choice by pressing enter, but for some reason, I cannot select through any of the items from the autocomplete list with my arrow keys (up and down), but in their example, I could.

What could be the problem here?

** Note, this is an Express project, and I'm using the Jade engine.

Header files

link(rel='stylesheet', href='/css/bootstrap.css')
script(src='/js/jquery-2.1.1.min.js')
script(src='/js/angular.min.js')
script(src='/js/bootstrap.min.js')
script(src='/js/ui-bootstrap-tpls-0.11.0.min.js')
script(src='/js/index.js')

partial code in index.html

<div ng-controller="TypeaheadCtrl" class="col-md-5 ng-scope">
    <pre class="ng-binding">Model {{selected}}</pre>
    <input type="text" ng-model="selected" placeholder="item name" typeahead="item for item in items | filter:$viewValue | limitTo:8" class="form-control" >
</div>

index.js

var App = angular.module('myApp', ['ui.bootstrap']);
function TypeaheadCtrl( $scope, $http ) {
    $scope.selected = undefined;
    $scope.items = ['Chicken', 'Corn', 'Ice Cream', 'Cereal'];
}

After playing around a bit more, I found that there's another autocomplete from my browser. Probably chrome autofill? Maybe my up and down is being used for this instead of being used for my web app? If so, how would you disable that via code so I can use it for angular's autocomplete on this page only?

Answer 1

Try setting autocomplete="off" at the <form> or <input> level.

The docs for autocomplete can be found in Mozilla's <input> section

Answer 2

I found the problem! The AngularJS version 1.3.0(beta), which I was using, was buggy. ng-mouseenter was not working and changing the selected index. I used the AngularJS version 1.2.19 (latest stable build) and it works perfectly now.

Problem Example (v1.3.0 beta-14) http://plnkr.co/edit/PazPIkWAce6e59OEmn7n?p=preview

<script src="https://code.angularjs.org/1.3.0-beta.14/angular.js"></script>

Working Example (v1.2.19 stable) http://plnkr.co/edit/pkbcsaPyJEJbCYVcZYpB?p=preview

<script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>

Answer 3

I had to make this change in ui-bootstrap-tpls-0.11.0.js for it to work

 angular.module("template/typeahead/typeahead-popup.html", []).run(["$templateCache", function($templ
 $templateCache.put("template/typeahead/typeahead-popup.html",
-    "<ul class=\"dropdown-menu\" ng-if=\"isOpen()\" ng-style=\"{top: position.top+'px', left: positi
+    "<ul class=\"dropdown-menu\" ng-show=\"isOpen()\" ng-style=\"{top: position.top+'px', left: posi

Changing ng-if to ng-show fixed it