ngTagInput выдает консольную ошибку JavaScript при вызове через директиву

Question

Я пытаюсь реализовать [ngTagsInput][1] в моем angularjs проект. Ниже моя установка

#js file
$scope.loadTags = function(query) {
        $scope.tags = [
            { text: 'just' },
            { text: 'some' },
            { text: 'cool' },
            { text: 'tags' }
          ]
        //return $http.get('/tags?query=' + query);
 }

и на мой взгляд (myview.html.haml)

  %tags-input{"ng-model" => "tags"}
    %auto-complete{:source => "loadTags($query)"}

который такой же как

   <tags-input ng-model="tags">
        <auto-complete source="loadTags($query)"></auto-complete>
      </tags-input>

** Выше кода я скопировал с самого сайта плагина ngTagInput. и я использую CDN для загрузки тех же версий, что и на сайте плагина. Но когда я набираю теги, я получаю следующую ошибку в моей консоли javascript

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

похоже, что-то связано с обещаниями. (Я довольно новичок в angularjs и я просто догадываюсь), но мне интересно, как это работает в примере, приведенном на сайте

Но если я загружаю теги при загрузке страницы, все работает нормально. Что может быть не так здесь. Любая помощь приветствуется

редактировать после комментариев @Pierre и мой новый код выглядит следующим образом

Я, наверное, забыл самую важную часть, я называю этот метод меток автозаполнения (in controller) из directive, (Извини за это...:()

recipeform.tags моя модель

#haml form
 %tags-input{"ng-model" => "recipeform.tags"}
    %auto-complete{:source => "loadTags($query)"}

#js
$scope.loadTags = function(query) {
        var defer = $q.defer();
        defer.resolve([
            { text: 'just' },
            { text: 'some' },
            { text: 'cool' },
            { text: 'tags' }
            ]);
        return defer.promise;
        /*return [*/
            //{ text: 'just' },
            //{ text: 'some' },
            //{ text: 'cool' },
            //{ text: 'tags' }
        /*]*/
      }

Оба кода js выдают ту же ошибку, что и предыдущая:(

Answer 1

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

"Источник" - это метод, который должен возвращать обещание, которое будет использоваться для возврата тегов. Не вводить их в свою модель...

$scope.loadTags = function(query) {
       return[
            { text: 'just' },
            { text: 'some' },
            { text: 'cool' },
            { text: 'tags' }
          ]
 }

должно сработать. Если нет, это означает, что директива нуждается в РЕАЛЬНОМ обещании, тогда вам нужно будет это сделать (но я не думаю, что вам нужно будет заходить так далеко):

$scope.loadTags = function(query) {
     var defer = $q.defer();
     defer.resolve([
            { text: 'just' },
            { text: 'some' },
            { text: 'cool' },
            { text: 'tags' }
          ]);
     return defer.promise;
 }