Skip to main content

Using ngTagsInput with $resource

This blog post might be outdated!
This blog post was published more than one year ago and might be outdated!
· One min read
Stephan Hochdörfer

Recently in an AngularJS project we used the ngTagsInput directive for AngularJS. In the documentation it is shown how to set-up your own function to load the data for the autocomplete functionality. Since our API returned the data in a way that ngTagsInput did not expected it, I needed a way to convert or extract the data before returning it to ngTagInput. It turned out to be quite easy:

$scope.loadTags = function (query) {
var deferred = $q.defer();
$resource('/tags/', {q: query}, {}).get().$promise.then( function (response) {
var tags = [];
angular.forEach(, function (item) {
if ( {
tags.push({ text:});

return deferred.promise;

I was able to grab the response from the API, iterate over the returned items and create the return value (an array of strings) as expected by ngTagsInput.