javascript - Angularjs typehead directive -

i trying create reusable typehead directive in angularjs i've hit few bumps on road. here working example:

directives.js

app.directive('autosuggest', function() {   return {     restrict: 'a',     link: function (scope, elem, attrs) {       /* nothing here yet */     }   }; });  app.directive('suggestinput', function() {   return {     restrict: 'a',     link: function (scope, elem, attrs) {       // bind keys       elem.bind('keydown', function (e) {         if (e.keycode == 38 || e.keycode == 40 || e.keycode == 13) { scope.$emit('listnavigate', { code: e.keycode }); }         else {           // suggestions           scope.getsuggest(attrs.source, elem.val());         }       });        // listen suggestion list       scope.$on('listselect', function (e, data) {         elem.val(data.name);       });     }   }; });  app.directive('suggestlist', function() {   var selectedindex = -1;   return {     restrict: 'a',     link: function (scope, elem, attrs) {       scope.$on('listnavigate', function (e, data) {         if (data.code === 38) {           selectedindex--;           // user pressed arrow           elem.children().removeclass('sel');           elem.children().eq(selectedindex).addclass('sel');         } else if(data.code == 40) {           selectedindex++;           // user pressed down arrow           elem.children().removeclass('sel');           elem.children().eq(selectedindex).addclass('sel');         } else if(data.code == 13) {           // prepare data           var selectdata = {};           selectdata.suggestvalue = elem.children().eq(selectedindex).children().html();           selectdata.suggestid = elem.children().eq(selectedindex).children().attr('item-id');            // send data input(s)           scope.$emit('listselect', selectdata);         }       });     }   }; }); 

html:

<fieldset autosuggest>   <input type="hidden" name="languageid">   <input type="text" suggestinput source="languages">   <input type="submit" class="button" value="save">   <ul suggestlist ng-show="suggest.languages" class="suggestlist">     <li ng-repeat="language in suggest.languages">       <a href="#" ng-bind="language.name" item-id="{{language.id}}"></a>     </li>   </ul> </fieldset> 

i have 2 questions:

1. how pass item-id suggestion list hidden input?
2. how make reusable component? (make work if have multiple typeheads on same page)

thanks!

have taken @ angular ui's directive twitter bootstrap typehead. this'll save lot of hassle ui.bootstrap.typeahead

html

<div ng-app="app" id="app">     <div class='container-fluid' ng-controller="typeaheadctrl">         <pre>model: {{selected| json}}</pre>         <input type="text" ng-model="selected" typeahead="state state in states | filter:$viewvalue | limitto:8"/>     </div> </div> 

js/controller

var app = angular.module('app', ['ui.bootstrap']);  function typeaheadctrl($scope) {    $scope.selected = undefined;   $scope.states = ['alabama', 'alaska', 'arizona', 'arkansas', 'california', 'colorado', 'connecticut', 'delaware', 'florida', 'georgia', 'hawaii', 'idaho', 'illinois', 'indiana', 'iowa', 'kansas', 'kentucky', 'louisiana', 'maine', 'maryland', 'massachusetts', 'michigan', 'minnesota', 'mississippi', 'missouri', 'montana', 'nebraska', 'nevada', 'new hampshire', 'new jersey', 'new mexico', 'new york', 'north dakota', 'north carolina', 'ohio', 'oklahoma', 'oregon', 'pennsylvania', 'rhode island', 'south carolina', 'south dakota', 'tennessee', 'texas', 'utah', 'vermont', 'virginia', 'washington', 'west virginia', 'wisconsin', 'wyoming']; } 

jsfiddle