selected value not updated when ng-model updated outside select2

[colinvella]

trafficstars

When the ng-model is updated programmatically or via some other control, the select2 control is not visually updated (although clicking on the dropdown does show the new selected item if it matches any in the list).

I've read elsewhere that if you modify the the ui-select2 directive by declaring a priority of 1000 it works. I have tried this and indeed it does. However I'd rather not modify the code as in my case it comes packaged in a Rails Gem that would be overridden on a Bundle Update or list in a cloud instancing script.

My proposal is to insert a line of code like this

13  return {
14    priority: 1000,         // <--- new line here
15    require: 'ngModel',
16    compile: function (tElm, tAttrs) {
17      var watch,

This apparently solves a conflict concerning the invocation of the $render function.

EDIT: A bit of bad news.. this causes a problem with select's that use hard-wired tags to define the dropdown items, so it's not a proper solution. In this case, the select's are not converted to the select2 interface and an error is thrown in the JS console.

EDIT 2: Some good news... specifying a priority of 1 rather than 1000 solves the tag problem above, in addition to the original issue. I'm still not sure if this is a one-size-fits-all solution.

13  return {
14    priority: 1,         // <--- new line here
15    require: 'ngModel',
16    compile: function (tElm, tAttrs) {
17      var watch,

EDIT 3: It is possible to modify the directive's priority after it is declared, without touching the original code as described above, as follows:

app.config(function($provide) {
  $provide.decorator("uiSelect2Directive", function($delegate) {
    var directive;
    directive = $delegate[0];
    directive.priority = 1;
    return $delegate;
  });
});

[titarenko]

Thanks! Your post helped me a lot! Just 1 question: do you plan to create pull request?

Update: eventually, in some cases, it doesn't work, unfortunately.

As example:

var query = $routeParams.query || '{}';
var parsedQuery = JSON.parse(query);
_.defaults(parsedQuery, {
    countries: []
});

$scope.countries = countries.lookup();
$scope.selectedCountries = parsedQuery.countries;

$scope.orders = orders.query({query: query});

$scope.fetch = function () {
    var newQuery = {
        countries: $scope.selectedCountries
    };

    $location.search({query: JSON.stringify(newQuery)});
};

<select multiple ui-select2="{allowClear: true}" ng-model="selectedCountries" data-placeholder="Countries">
    <option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>
<button ng-click="fetch()" class="btn btn-primary pull-right">Apply</button>

When page is reloaded (Ctrl+F5), select control is populated correctly, otherwise (on "Apply") select control becomes empty.

[sachindu]

the solution of adding priority worked for me..

thanks

[georgebyte]

In Angular >= 1.5 I had to set the priority to something greater than 1 in order to get the workaround working. PS: Thanks a lot for posting this solution!

[peacepostman]

Hello, thanks for the solutions but nothing worked for me.. the only workaround was to add a ng-change on my field and update my scope in the controller via the function.

Hope it will help.

[HalShaw]

Has this been solved? I ran into this problem too, but I am using angular4. It doesn't update the selected options in the input, but it updates them in the dropdown. can anyone help? Thanks.