Setting initial values of Angular-UI Select2 multiple directive

Question

I have a select2 directive for a multiple select of countries with a custom query to grab the data:

// Directive
<input ng-model="filters.countries" ui-select2="filters.countryOptions"
    data-placeholder="Choose a country...">

// filters.countryOptions
{ 
    multiple: true,
    query: function() { 
        get_list_of_countries(); 
    }
}

// Formatted data from remote source
[
    {id: 'US', text: 'United States'},
    {id: 'CA', text: 'Canada'} ...
]

I'm trying to set the initially selected values in my controller using:

$scope.filters.countries = [{id: 'US', text: 'United States'}];

This does correctly set the model, however this is happening before the select2 initialization has occurred. As I step through the remaining initialization code the input temporarily displays [Object] before finally blanking out $scope.filters.countries and the input, but it does not display the placeholder text in the input.

To get around this I'm using the following to reset the models' initial value:

$scope.$on('$viewContentLoaded', function() {
    setTimeout(function() {
        $scope.filters.countries = [{id: 'US', text: 'United States'}];
    }, 100);
});

It seems really hackish to be using a setTimeout. Is there a better way that I'm missing?

Update 1

As requested by ProLoser here is a demo and github ticket.

Demo: http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p=preview

GitHub Issue: https://github.com/angular-ui/angular-ui/issues/455

Following ProLoser's advice I started using select2's initSelection function:

initSelection : function (element, callback) {
  callback($(element).data('$ngModelController').$modelValue);
},

It does the trick but still feels like a workaround.

You might contemplate creating an accepted answer following ProLoser's advice. — Stewie
– Stewie, Commented Jun 14, 2013 at 14:51
If "Update 1" solved the problem, convert it to an answer and accept it. — DRaehal
– DRaehal, Commented Jun 14, 2013 at 19:36
I think "Update 1" is the answer, initSelection seems the correct way of doing it — Isaac Zepeda
– Isaac Zepeda, Commented Jul 7, 2013 at 22:59

Pablo · Accepted Answer · 2013-08-16 05:00:57Z

8

As requested by ProLoser here is a demo and github ticket.

Demo: http://plnkr.co/edit/DgpGyegQxVm7zH1dZIJZ?p=preview

GitHub Issue: https://github.com/angular-ui/angular-ui/issues/455

Following ProLoser's advice I started using select2's initSelection function:

initSelection : function (element, callback) {
  callback($(element).data('$ngModelController').$modelValue);
},

It does the trick but still feels like a workaround.

answered Aug 16, 2013 at 5:00

Pablo

2,5491 gold badge20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tomascharad · Accepted Answer · 2015-03-19 05:22:53Z

-1

Have you tried initialising your options as:

<option selected value="0">Name</option>

answered Mar 19, 2015 at 5:22

tomascharad

3,18826 silver badges24 bronze badges

Collectives™ on Stack Overflow

Setting initial values of Angular-UI Select2 multiple directive

Update 1

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update 1

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related