title: Getting selected value from datalist element
body: <p>I'm trying to create an autocomplete element for own purposes. Basically, my directive creates an input where I type my search and a datalist which will store my server values.</p>
  
  <pre><code>template: function (elem, attrs) {
      return '&lt;input id="x" type="text" list="listing" /&gt;&lt;datalist id="listing"&gt;' +
      '&lt;option ng-repeat="item in resultFromServer"' +
      'label="myLabelValue" value="myTextValue" data-id="myIdValue" /&gt;&lt;/datalist&gt;';
  },
  transclude: true,
  link: function (scope, elem, attrs) {
      elem.children(0).bind('keyup', function () {
          var val = elem.children(0).val();
          var min = scope.$eval(attrs.minLength);
  
          if (val.length &gt;= min) {
              doGetAsync(attrs.action, { searchFor: val }, function (result) {
                  scope[resultFromServer] = result.Data;
                  scope.$apply();
              });
          }
      });
  }
  </code></pre>
  
  <p>The research is working fine.</p>
  
  <p>The issue is: how to fire an event when I select an <code>&lt;option&gt;</code> from that datalist? When I select any value from my <code>&lt;datalist&gt;</code>, I want to get that selected value and store the id into a scope variable. How can I do that?</p>
  
  <p>Thank you so much!!!</p>