AngularJS/Select2 add item programmatically and selecting that item is not working

Question

I am new to using AngularJS and the select2 control (AngularUI) and am using the latest stable version of select2 (3.4.5). I am trying to add an item programmatically through javascript to the list that the ui-select is using and selecting that item. For some reason, it updates the ng-model, but does not select the item from the dropdown visually.

Example here: http://plnkr.co/edit/X1flkKxnDHVCgXHnnmE4?p=preview

As you will see, when you click "add yellow", it adds it to the dropdown, and sets the model selectedColor to be the correct color, however, it does not get updated visually on the <select>. Any help would be great, thanks!

Answer 1

You should add $scope.$Apply(); after adding new items to the list to Angular could render it correctly.

You can see an example here: http://plnkr.co/edit/66zQdJl1MvRIcx3qGCkz?p=preview

Answer 2

Little hack for solving this problem: http://plnkr.co/edit/Us35mGXkaOGGc3jHGdDf?p=preview

You just copy array by angular.copy().

There are 2 examples. See versions block. First for strings and second for objects.