title: creating angular-js directive that updates ng-model
body: <p>I am trying to create a directive that wraps the twitter typeahead plugin. What I have so far is:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input ng-twitter-typeahead type="text" ng-model="participant" data="exampleData" /&gt;
  {{ participant }}
  </code></pre>
  
  <p>I want the value for 'participant' to be updated when I select something on the typeahead. The typeahead itself works properly, but I can't capture the selected value. Below is the javascript:</p>
  
  <pre><code>var app = angular.module('myApp', [])
  app.directive('ngTwitterTypeahead', function () {
    return {
      restrict: 'EA',
      scope: {
        data: '='
      },
      link: function ($scope, $element, $attrs) {
        $element.typeahead($scope.data);
  
        $element.bind('typeahead:selected', function(obj, datum) {        
           // I really don't know how to do this part
           // the variable 'datum' is what I want to be passed to ng-model
           // I tried things like:
              // Including the ngModelController and typing:
              // ngModel.$setViewValue(datum)
              // but that didn't work.
       }
    };
  });
  </code></pre>
  
  <p>I'm obviously missing something fundamental when it comes to AngularJS. Any help would be greatly appreciated!</p>
  
  <p><em><strong></em> EDIT **</strong></p>
  
  <p>I found the solution. I am clueless sometimes:</p>
  
  <pre><code>angular.module('siyfion.ngTypeahead', [])
    .directive('ngTypeahead', function () {
      return {
      restrict: 'C',
      scope: {
        datasets: '=',
    ngModel: '='
      },
      link: function ($scope, $element, $attrs) {
        $element.typeahead($scope.datasets);      
  
        $element.bind('typeahead:selected', function(obj, datum) {        
      $scope.$apply(function() {
       $scope.ngModel = datum;
      });
    })            
      }
    };
  });
  </code></pre>