ng-model is not getting changed in ui-select

Question

I\'m trying to achieve something very straightforward:

    {         


        

Answer 1

I had a similar issue with angular 1.3.14 and ui-select and a multiple-choice ui-select directive binding to an array. I was not able to bind the selected items to an array referred to in ng-model. I got it to work by wrapping selectedItems into an object:

$scope.myObj = { selectedItems : []};
...

<ui-select ng-model="myObj.selectedItems" ...>
</ui-select>

Putting selectedItems directly on the $scope didn't work for me.

Answer 2

I am having the similar issue for angularjs 1.4. In one controller ng-model value get update. But using the same way on other page it does not work. Following are my codes

Working:

var ctrl = this; 

ctrl.filters = {};

ctrl.filters.country = $rootScope.lUPro.RM_Country.split(",");

$(".country_select2").select2().val(ctrl.filters.country).trigger('change');

Select box is

$comint->CountrySelectBox(array("name"=>"country[]",  "class"=>"country_select2 form-control",  "id" => "req_country",  "ng-model" => "ctrl.filters.country","multiple" =>"multiple")); 

Not Working:

 var prectrl = this;

 prectrl.preferenceformdata = {};

  var pf = {};

  pf.country =  $rootScope.lUPro.RM_Country.split(",");

  prectrl.preferenceformdata = pf;
   $(".rm_country_select2").select2().val(prectrl.preferenceformdata.country).trigger('change');

Select box:

 $comint->CountrySelectBox(array("name"=>"country[]","class"=>"country_select2 form-control","id" => "req_country","ng-model"=>"prectrl.preferenceformdata.country","multiple" =>"multiple"));

So work around i am using to update value in ng-model variable:

$(".country_select2").select2().val(prectrl.preferenceformdata.country)

.trigger('change').on("change",

function(e){

var values = $(this).val();

$scope.$apply(function(){prectrl.preferenceformdata.country = values;});

});

Answer 3

Initializing an empty object just like @Rado mentioned fixed it for me on this structure:

              <ui-select ng-model="reportFilterStatus.selected" title="Filtrar status">
                <ui-select-match placeholder="Filtra un estatus">
                    {{$select.selected}}
                </ui-select-match>
                <ui-select-choices repeat="status in filterStatusOptions | filter: $select.search">
                  <small ng-bind-html="status | highlight: $select.search"></small>
                  <span ng-bind-html="statuse | highlight: $select.search"></span>
                </ui-select-choices>
              </ui-select>

Answer 4

For me it was the that was not updating the text and I used it like so:

$timeout(function () {
    $('#ownerdetail').trigger("create");
    $('#ownerdetail').delay(0).animate({opacity: 1}, 100);
    $('#selectdcontact').selectmenu().selectmenu('refresh'); //This solves it
    $('#selectdcust').selectmenu().selectmenu('refresh'); //This solves it
  });

Answer 5

I solved this by putting ng-init for that model after </ui-select> on the next div.
Example:

<div class="col-md-6" ng-init="company-stack=null">

Answer 6

I'm having similar issues, seems angular-ui-select#0.7 requires angular#1.2.* to work properly at this moment.