autocomplete textbox and AngularJS

Question

I have a text box and I want to apply the autocomplete on it. I am using the following plugin:

and it works fine but as soon as I combine it with AngularJS it stops working:

I have the following code:

function personController($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe",
    $scope.availableTags = [],
    $scope.fullName = function() {
        /* return $scope.firstName + " " + $scope.lastName;*/
        $scope.availableTags= [
                      "ActionScript",
                      "AppleScript",
                      "Asp",
                      "BASIC",
                      "C",
                      "C++",
                      "Clojure",
                      "COBOL",
                      "ColdFusion",
                      "Erlang",
                      "Fortran",
                      "Groovy",
                      "Haskell",
                      "Java",
                      "JavaScript",
                      "Lisp",
                      "Perl",
                      "PHP",
                      "Python",
                      "Ruby",
                      "Scala",
                      "Scheme"
                    ];
        $(document).ajaxComplete(function(){
            alert('');
            $("#txt").autocomplete({
                source: $scope.availableTags,
            });

        });
        //return $scope.availableTags;
    }
}

and jfiddle link is as follow:

jfiddle

As you can see the autocomplete does not work, though without Angular it works well.

Can anyone help?

check this http://stackoverflow.com/questions/25268897/kendo-ui-angular-js-and-autocomplete-with-a-service — saurabh64, Jan 17 '15 at 06:03
Thank you but if I understood well in that link they are using different plugin but I want to use this one and I do not know why angularjs does not work with my current code(I do not see anything wrong)? — HMdeveloper, Jan 17 '15 at 06:09

score 15 · Accepted Answer · answered Jan 17 '15 at 06:44

<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>jQuery UI Autocomplete - Default functionality</title>
    <script data-require="angular.js@1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script>
  var app=angular.module('app',[]);
  app.controller('ctrl',function($scope){
   $scope.availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $scope.complete=function(){
      console.log($scope.availableTags);
    $( "#tags" ).autocomplete({
      source: $scope.availableTags
    });
    } 
  });
  </script>
  </head>

  <body ng-app="app" ng-controller="ctrl">
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags" ng-keyup="complete()"/>
    </div>
  </body>

</html>

Plunker for you http://plnkr.co/edit/5XmPfQ78vRjSrxE0Tt3B?p=preview Sorry I am not good at fiddle.

Thanks a lot fro your answer but can you what is wrong with mine that is not working? is it becasause I did not define app? — HMdeveloper, Jan 17 '15 at 15:19
Hey sorry there are lot of errors in your code please check console of jsfiddle. Angular is not loaded properly in fiddle. And if you accept my answer please mark it :-P Thanku — squiroid, Jan 17 '15 at 16:05

autocomplete textbox and AngularJS

1 Answers1

Linked