ng-model is not getting changed in ui-select

Question

I'm trying to achieve something very straightforward:

<ui-select multiple ng-model="company.stack" theme="bootstrap">
    <ui-select-match>{$$item.name$}</ui-select-match>
    <ui-select-choices repeat="technology in technologies | filter: $select.search">
        <div ng-bind-html="technology.name | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

When changing the objects, the changes are not reflected in the model company.stack. I tried changing it to $parent.company.stack, but it still doesn't work. What am I missing? I'm using AngularJS v1.3.0-beta.17.

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

Not sure if you figured this out already, but I was also struggling with this "basic use case" today, being new to AngularJS and all. I'm using Angular 1.2.16 and ui-select 0.8.3, and while everything else worked, I just couldn't get it to update the scope variable employee.selected.

In my case, the issue was caused by my limited experience with AngularJS. Since ng-model is set to a property of an object (employee, in my case) it had to be initialized first. Adding $scope.employee = {}; into the controller resolved this.

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

I'm struggling as well with a very basic use case, on Angular 1.2.16 and ui-select 0.8.3. Although it seems to me there's a typo in your code, in ui-select-match.

Usually that attributes looks like {{$select.selected.your_property_here}}, so double curly braces and single dollar sign, for some kind of standard property name $select.selected. Could it be this is your issue?

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

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 7

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 8

some people here touched the problem but i'll make it clear. for some reason ui-select requires the ng-model to be a nested value within $scope. so ng-model must point to x.y within scope and not x or y.

Answer 9

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