first fiddle test

by modar al nashar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">

  <input-dropdown ng-model="preference" list="values" on-select="pick(value)" index1="index1" ng-keydown=changeSelected($event)></input-dropdown> {{preference}}

</div>

CSS

.input-dropdown {
  position: relative;
  display: inline-block;
}

.input-dropdown .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 2px;
  background: #EEE;
}

.input-dropdown .dropdown div {
  cursor: pointer;
  padding: 2px 5px;
}

.selected {
  color: red
}

.input-dropdown input:focus + .dropdown {
  display: block;
}

JavaScript

var app = angular.module('myApp', []);

 app.controller('MainCtrl', function($scope) {
   $scope.values = ['Chrome', 'Firefox', 'IE'];
   $scope.pick = function(value) {
     console.log('Picked', value)
   };
   $scope.index1 = 1;

   $scope.changeSelected = function(ev) {
     if (ev.keyCode == 38 && $scope.index1 > 0) //keydown
       $scope.index1--;
     else if (ev.keyCode == 40 && $scope.index1 < $scope.values.length - 1) //key up
       $scope.index1++;
     else if (ev.keyCode == 13)
       $scope.preference = $scope.values[$scope.index1];
   }
 });

 app.directive('inputDropdown', function($compile) {

   var template =
     '<input ng-model="ngModel">' +
     '<div class="dropdown">' +
     '<div ng-repeat="value in list | filter: ngModel">' +
     '<div ng-mousedown="select($event, value)" ng-class="index1==$index?\'selected\':\'\'">{{value}}</div>' +
     '</div>' +
     '</div>';

   return {
     restrict: 'EA',
     scope: {
       ngModel: '=',
       list: '=',
       onSelect: '&',
       index1: '='
     },
     template: template,
     link: function(scope, element, attrs) {
       element.addClass('input-dropdown');
       scope.select = function(e, value) {
         scope.ngModel = value;
         scope.onSelect({
           $event: e,
           value: value
         });
       };
     }
   };
 });