title: Getting angular tags input to work
body: <p>I am trying to implement <a href="https://github.com/mbenford/ngTagsInput" rel="nofollow noreferrer">ng-tags-input</a> to work within my website, so basically people need to input some tags by choosing tag(s) from a list of available tags persisted on database</p>
  
  <p><strong>server:</strong></p>
  
  <pre><code>exports.list = function(req, res) {
  
    var query = req.query;
    mongoose.set('debug', true);
  
    Tag
      .find({
        'text': new RegExp(query.text, 'i')
      })
      .sort({
        created: -1
      })
      .select('text')
      .exec(function(err, tags) {
        if (err) {
          return res.status(400).send({
            message: errorHandler.getErrorMessage(err)
          });
        } else {
          console.log('Tags: ', tags);
          res.json(tags);
        }
      });
  };
  </code></pre>
  
  <p><strong>angular controller:</strong></p>
  
  <pre><code>(function() {
    'use strict';
  
    angular
      .module('contests')
      .controller('ContestsAddController', ContestsAddController);
  
    ContestsAddController.$inject = [
      '$scope',
      '$state',
      '$location',
      'Tag'
    ];
  
    function ContestsAddController(
      $scope,
      $state,
      $location,
      Tag
    ) {
      var vm = this;
  
      /** Properties */
      vm.tags = [];
  
      /** Methods */
      vm.loadTags = loadTags;
  
      function loadTags(query) {
        return Tag.load();
      }
    }
  }());
  </code></pre>
  
  <p><strong>view:</strong> </p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;label class="col-md-3 control-label"&gt;With tags &lt;/label&gt;
    &lt;div class="col-md-9"&gt;
      &lt;tags-input ng-model="vm.tags" add-from-autocomplete-only="true"&gt;
        &lt;auto-complete source="vm.loadTags($query)" debounce-delay="500" load-on-empty="true"&gt;&lt;/auto-complete&gt;
      &lt;/tags-input&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>angular service:</strong></p>
  
  <pre><code>(function() {
    'use strict';
  
    angular
      .module('tags')
      .factory('Tag', Tag);
  
    Tag.$inject = [
      '$http',
      '$q',
      '$timeout',
      'Authentication',
      'Shuttle',
      'CONST'
    ];
  
    function Tag(
      $http,
      $q,
      $timeout,
      Authentication,
      Shuttle,
      CONST
    ) {
  
      var service = {
        getTags: getTags,
        load: load
      };
      var _this = this;
  
      return service;
  
      // SCOPE FUNCTIONS
      function getTags(query) {
        return Shuttle.get(CONST.EP_TAGS, query, {}, 1000, {
          Authorization: 'JWT ' + Authentication.token
        });
      }
  
      function load() {
        var deferred = $q.defer();
        deferred.resolve(this.getTags({}));
        return deferred.promise;
      }
    }
  }());
  </code></pre>
  
  <p><strong>Tag.load() response</strong></p>
  
  <pre><code>[  
    {  
      "_id":"579ecc5fca552b6e89094415",
      "text":"Comedian"
    },
    {  
      "_id":"579ecc5aca552b6e89094414",
      "text":"Cardist"
    },
    {  
      "_id":"579ecc56ca552b6e89094413",
      "text":"Magician"
    },
    {  
      "_id":"579ecc4bca552b6e89094412",
      "text":"Actress"
    },
    {  
      "_id":"579ecc47ca552b6e89094411",
      "text":"Actor"
    },
    {  
      "_id":"579ecbecca552b6e89094410",
      "text":"Bassist"
    },
    {  
      "_id":"579ecbdfca552b6e8909440f",
      "text":"Guitarist"
    },
    {  
      "_id":"579ecbd9ca552b6e8909440e",
      "text":"Singer"
    },
    {  
      "_id":"579ecbc6ca552b6e8909440d",
      "text":"Dancer"
    }
  ]
  </code></pre>
  
  <p>The problems that i am facing is that when i typed 3 letters (which correctly triggered Tag.load() as expected, and returning above's response)</p>
  
  <ul>
  <li>it doesn't show any auto complete or tag suggestions </li>
  <li>it's immediately putting that 3 letters as a tag (picture below) </li>
  <li>the <code>console.log(vm.tags);</code> is not including the whole Tag object, just the <code>text</code> key value pair</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/uoW5V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uoW5V.png" alt="enter image description here"></a></p>
  
  <p>is there something i missed?</p>
  
  <p>i am using angular 1.5.0</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I have added a <a href="http://plnkr.co/edit/YmUkPHRlWpn3Q14eWzg9?p=preview" rel="nofollow noreferrer">plunker</a> although with some modifications, but it is working just fine there, though it still doesn't work in my app, is it angular version?</p>
  
  <p>One more thing i forgot to mention, the one's in mine is not showing the dropdown as i typed.</p>
  
  <p><strong>UPDATE #2</strong>
  I updated the plunker using angular 1.5.0 which is the one i am using, and its working, so its not angular version.</p>