Official example for Angular-ui select2 tags is:

myAppModule.controller('MyController', function($scope) {
    $scope.list_of_string = ['tag1', 'tag2']
    $scope.select2Options = {
        'multiple': true,
        'simple_tags': true,
        'tags': ['tag1', 'tag2', 'tag3', 'tag4']  // Can be empty list.
    };
});

And I have this piece of code:

$scope.select2Options = {
                        'multiple': true,
                        'simple_tags': true,
                        'tags': $scope.categoryNames
                    };

$scope.$watch(function () { return adminCrudService.getCategoriesForUpdate(); }, function () {
                $scope.action = "edit";
                $scope.categoriesForUpdate = adminCrudService.getCategoriesForUpdate();
                if ($scope.categoriesForUpdate.length > null) {
                    $scope.categoryNames = [];
                    _.forEach($scope.categoriesForUpdate, function (item) {
                        $scope.categoryNames.push(item._backingStore.Name);
                    });

                }
            });

But this just doesn't work, when I click on Selcet2, I get No matches found and I've logged $scope.categoryNames inside $watch, and data is there (so that part works fine).

So my question is can tags be loaded dynamically, and if they can, how ?

Official example for Angular-ui select2 tags is:

myAppModule.controller('MyController', function($scope) {
    $scope.list_of_string = ['tag1', 'tag2']
    $scope.select2Options = {
        'multiple': true,
        'simple_tags': true,
        'tags': ['tag1', 'tag2', 'tag3', 'tag4']  // Can be empty list.
    };
});

And I have this piece of code:

$scope.select2Options = {
                        'multiple': true,
                        'simple_tags': true,
                        'tags': $scope.categoryNames
                    };

$scope.$watch(function () { return adminCrudService.getCategoriesForUpdate(); }, function () {
                $scope.action = "edit";
                $scope.categoriesForUpdate = adminCrudService.getCategoriesForUpdate();
                if ($scope.categoriesForUpdate.length > null) {
                    $scope.categoryNames = [];
                    _.forEach($scope.categoriesForUpdate, function (item) {
                        $scope.categoryNames.push(item._backingStore.Name);
                    });

                }
            });

But this just doesn't work, when I click on Selcet2, I get No matches found and I've logged $scope.categoryNames inside $watch, and data is there (so that part works fine).

So my question is can tags be loaded dynamically, and if they can, how ?

• javascript
• angularjs
• jquery-select2
• angular-ui

2 Answers 2

I've recently encountered this issue when using the AngularUI Select2 project, and solved it by making the tags argument a function that returns the model. For example:

$scope.select2Options = {
  multiple: true,
  simple_tags: true,
  tags: function () {
    return $scope.categoryNames;
  }
};

Any updates to the $scope.categoryNames is reflected in the view because Select2 calls the tags function when opened and on every key press.

Hopefully this is useful for people wanting to use Select2 rather than Chosen.

Well, I couldn't get it to work, so I've deiced to use Chosen instead, following this great tutorial: link and I got result I wanted in no-time.