Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.0rc2.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div ng-controller="MyCtrl">
<div>jQuery UI integration in AngularJS : creation autocomplete tag</div>
<div>to test, start by typing a word from availableTags Array</div>
<div>selection is ? {{obj.name}}</div>
<div><input autocomplete="availableTags" selection="obj.name"/></div>
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.directive('autocomplete', function($parse) {
return function(scope, element, attrs) {
var setSelection = $parse(attrs.selection).assign;
scope.$watch(attrs.autocomplete, function(value) {
element.autocomplete({
source: value,
select: function(event, ui) {
setSelection(scope, ui.item.value);
scope.$apply();
}
});
});
};
});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name;
$scope.availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
}