Angular UI select2 directive - updating the model programmatically not reflected on the widget

Question

I'm trying to update select2 model programmatically and for the view to refresh but it doesn't seem to work.

Here's a sample plunker forked from the Angular UI project: http://plnkr.co/edit/kQROgr?p=preview

I tried adding initSelection() accroding to select2 docs (http://ivaynberg.github.com/select2/ "Reacting to external value changes"), but that didn't work. I also tried with select2 3.3.2 and that didn't solve it either.

There are two issues: 1) Click "Update-Model", the model updates but it doesn't add a tag to the select2 widget. Also 2) Click "Update-Model" and then use select2 to pick a second tag, the first tag added by "Update-Model" disappears.

This might help? github.com/angular-ui/angular-ui/issues/455 — DanB
Were you able to get this working. I am running into the same issue. — testing123
Argh I gave it the old college try... I know it works for the record becuase I use it all over the app I'm creating and I push external deta to the modal all the time and it updates the select2 so i'm sure there's something else at play here... — btm1
@jonathan, I have the same issue. What's common between your scenario and mine is that the source list seems to be changing. In your case, it changes in the 'query' method specified in the 'options'. In my case, I apply a series of angularjs filters using '|' within the 'ng-repeat'. I think it's the object reference comparison that must be failing. Do post back here if you have any updates on this. — Faredoon

Tyrone Wilson Tyrone Wilson · Accepted Answer · 2014-05-15T19:57:15

I know the question is a bit old but hey... I found it and didn't know the answer.

I managed to do what I wanted by setting up the model and then recalling initSelection() on the select2Options config

So my config was like so:

$scope.select2Options = {
allowClear: true
minimumInputLength: 3
quietMillis: 1000
initSelection: ->
  $scope.property
query: (query)->
  Properties.query({q: query.term}, (response)->
    data = {results: processData(response['properties'])}
    query.callback(data)
    )

  processData = (data)->
    results = []
    angular.forEach(data, (item, index)->
      results.push(item)
      )
    return results

}

I then had my modal return the newly created object like so:

modalInstance.result.then((result)->
    $scope.property = result
    $scope.select2Options.initSelection()
  )

Basically once it had updated the model I had to manually reinitialize the select2 widget. I think this could be handled with a $scope.$watch if you really wanted to but that would probably be a waste unless you have the property being updated from a few places or something.

Angular UI select2 directive - updating the model programmatically not reflected on the widget

1 Answers