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

Share Improve this question Follow asked Aug 14, 2013 at 23:28 hyperNhyperN 2,7541010 gold badges5858 silver badges9696 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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.