up/down arrow key issue with typeahead control (angular bootstrap UI)

Question

Check this PLNKR , i have implemented typeahead control, By default in type ahead control they are not setting any max-height or height to list, but as per

Answer 1

Here is the working plunker

In this I have override ui-bootstrap typeahead as suggested in the answer.

Following are the changes I need to make it work:

Added following line in typeaheadMatch directive (line - 335 of ui.bootstrap.typeahead.js file in the plunker)

element[0].focus();

Added shouldFocus directive (line - 314 -350)

.directive('shouldFocus', function(){
  return {
   restrict: 'A',
   link: function(scope,element,attrs){
     scope.$watch(attrs.shouldFocus,function(newVal,oldVal){
       element[0].scrollIntoView(false);
     });
   }
 };
})

and finally added directive in li (line - 372)

should-focus=\"isActive($index)\"