Question

I’m using AngularUI’s ui-select2 directive with AJAX.

Here’s what I’ve got in my view:

<label>Group: <input ng-model="group" ui-select2="select2GroupConfig"></label>

Here’s what I have in my model:

$scope.select2GroupConfig = {
    ajax: {
        url: 'theURL',
        data: function (term, page)
        {
            return { q: term };
        },
        results: function (data, page)
        {
            return { results: data };
        }
    }
};

This works as expected.

---

My question: How can I update the value via the model?

I tried:

$scope.group = 'some group';

I also tried using an object:

$scope.group = { id: 32, text: 'some group'};

but that doesn’t either work.

How do you update a select2 that uses AJAX, via the model?

Answer 1

Turns out you can set it to an object, but only after ui-select2 runs; I was trying to give it an initial value.

So, instead of using the regular model, you have to use select2‘s initSelection function:

$scope.group = 'Dummy Content';

$scope.select2GroupConfig.initSelection = function ( el, fn ) {
    fn({ id: 2, text: 'Some group' });
}

Note that you have to give the input an initial value, otherwise initSelection is never called. That’s why I’m just setting it to some dummy content.

---

This works, but it feels like a hack.

Does anybody have any better ideas?