AutoComplete using ngTagsInput Cannot Read Property 'then' of undefined

Question

I am trying to figure out this problem but I am having no luck.

This is the plunker I wrote that works. Notice that the code works perfectly when I am accessing tags.json using a $http.get.

Angular Directive Code:

app.directive('tag', function($http) {
  return {
    restrict: 'E',
    templateUrl: 'tag.html',
    link: function (scope, el) {
       scope.tags = [
          { text: 'Tag1' },
          { text: 'Tag2' },
          { text: 'Tag3' }
        ];

        var test = [{ "text": "Tag9" },{ "text": "Tag10" }];

        scope.loadTags = function (query) {
          return $http.get('tags.json');
        }
    }
  }
});

HTML inside of the 'tag.html':

<tags-input ng-model="tags">
  <auto-complete source="loadTags($query)"></auto-complete>
</tags-input>
<p>Model: {{tags}}</p>

Working Pic:

---

Great but, I DON'T want to use $http.get because I already have an object that has the tags inside of it that I want to use for auto-complete. SO I tried this

Angular Directive Code:

app.directive('tag', function($http) {
  return {
    restrict: 'E',
    templateUrl: 'tag.html',
    link: function (scope, el) {
       scope.tags = [
          { text: 'Tag1' },
          { text: 'Tag2' },
          { text: 'Tag3' }
        ];

        var test = [{ "text": "Tag9" },{ "text": "Tag10" }];
        scope.loadTags = test;
    }
  }
});

HTML inside of my 'tag.html':

<tags-input ng-model="tags">
  <auto-complete ng-model="loadTags"></auto-complete>
</tags-input>
<p>Model: {{tags}}</p>

BUT this doesn't work at all. Instead I get

TypeError: Cannot read property 'then' of undefined
    at http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.0/ng-tags-input.min.js:1:5044
    at http://code.angularjs.org/1.2.15/angular.js:13777:28
    at completeOutstandingRequest (http://code.angularjs.org/1.2.15/angular.js:4236:10)
    at http://code.angularjs.org/1.2.15/angular.js:4537:7 angular.js:9563

Link to my Plunk: http://plnkr.co/edit/wEqVMf?p=info

Answer 1

So the loadFunction needs to be changed so that it returns a promise:

app.directive('tag', function($q) {
    ...
    link: function(scope) {
        $scope.loadTags = function() {
            var deferred = $q.defer();
            deferred.resolve([{ text: 'Tag9' },{ text: 'Tag10' }]);
            return deferred.promise;
        }
    }
}

In addition to that, you need to fix your markup so it uses the source option:

<auto-complete source="loadTags()"></auto-complete>

This fixed my problem