angular typeahead multi input

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@1.9.1" data-semver="1.9.1" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.3" src="http://code.angularjs.org/1.2.3/angular.js"></script>
    <script data-require="typeahead.js@*" data-semver="0.9.3" src="http://twitter.github.io/typeahead.js/releases/0.9.3/typeahead.js"></script>
    <script src="angular-typeahead.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-app="App" ng-controller="MyController">
    <div>
      <h2>select languages.</h2>
      <p>languages = {{languages.local}}</p>
      <ul ng-repeat="u in users">
        <useritem user="u" languages="languages" />
      </ul>
    </div>
  </body>

</html>

var app = angular.module('App', ['siyfion.sfTypeahead']);

app.directive('useritem', function($compile) {
  var linker = function(scope, element, attr) {
    element.html('<li class="user"><div>{{user.name}}</div>' +
      '<input type="text" class="sfTypeahead" ' +
      '  datasets="languages" ng-model="user.language"></li>');
    $compile(element.contents())(scope);
  };

  return {
    restrict: 'E',
    replace: true,
    link: linker,
    scope: {
      user: '=',
      languages: "="
    }
  };
});

app.controller('MyController', ['$scope',
  function($scope) {
    $scope.users = [{
      name: "bill",
      language: ""
    }, {
      name: "luis",
      language: ""
    }];

    $scope.languages = {
      name: 'items',
      local: ['java', 'javascript', 'c++', 'ruby', 'perl', 'python']
    };
  }
]);

.user{
}

t.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}


.tt-hint {
  color: #999
}

.tt-dropdown-menu {
  width: 150px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 14px;
  line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

angular.module("siyfion.sfTypeahead",[]).directive("sfTypeahead",function(){return{restrict:"ACE",scope:{datasets:"=",ngModel:"="},link:function(a,b){function c(c,e,f){var g=b.val();a.$apply(function(){d=!0,a.ngModel=e,a.selectedDataset=f}),b.val(g)}var d=!1;b.typeahead(a.datasets),b.bind("typeahead:selected",c),b.bind("typeahead:autocompleted",c),b.bind("input",function(){a.$apply(function(){d=!0;var c=b.val();a.ngModel=c})}),a.$watch("ngModel",function(c){var e;if(d)return d=!1,void 0;if($.isArray(a.datasets)){for(var f=0;f<a.datasets.length;f++)if(a.datasets[f].name==a.selectedDataset){e=a.datasets[f].valueKey;break}}else e=a.datasets.valueKey;c&&e&&c.hasOwnProperty(e)&&(c=c[e]),b.typeahead("setQuery",c||"")})}}});