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.

Did you ever get this working?

Batman
– Batman

2014-10-27 18:13:26 +00:00
Commented Oct 27, 2014 at 18:13 — Batman
– Batman, Commented Oct 27, 2014 at 18:13
AunAun's answer is the correct one.

Frank
– Frank

2015-07-23 15:41:15 +00:00
Commented Jul 23, 2015 at 15:41 — Frank
– Frank, Commented Jul 23, 2015 at 15:41

AunAun · Accepted Answer · 2015-04-27 23:43:48Z

39

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.

answered Apr 27, 2015 at 23:43

AunAun

1,4532 gold badges15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

M.W. Felker Over a year ago

This also helped me, angular 1.4. Looks lik UI Select requires you to pass a object which contains an array property.

shihabudheen Over a year ago

nice.. helped me also

deagleshot Over a year ago

its 2023 and im working on angularjs and this helped me gg

Rado · Accepted Answer · 2014-11-04 13:53:06Z

4

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.

answered Nov 4, 2014 at 13:53

Rado

2901 silver badge13 bronze badges

Comments

shahar taite · Accepted Answer · 2019-07-11 06:51:00Z

2

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.

answered Jul 11, 2019 at 6:51

shahar taite

4726 silver badges11 bronze badges

1 Comment

TryingToImprove Over a year ago

I had the same problem, and solved it by usinga $scope.ui = { myModel: null } instead of $scope.myModel = null and havingng-model="ui.myModel" instead!

Reedyseth · Accepted Answer · 2016-07-19 20:03:59Z

1

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>

answered Jul 19, 2016 at 20:03

Reedyseth

414 bronze badges

Comments

superjos · Accepted Answer · 2014-10-23 22:36:30Z

0

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?

answered Oct 23, 2014 at 22:36

superjos

12.8k6 gold badges94 silver badges143 bronze badges

Comments

bcesars · Accepted Answer · 2015-03-23 13:55:15Z

0

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">

edited Mar 23, 2015 at 13:55

bcesars

1,0051 gold badge17 silver badges36 bronze badges

answered Mar 23, 2015 at 13:09

resakse

831 silver badge6 bronze badges

Comments

Bogdan T Stancu · Accepted Answer · 2017-06-30 16:35:59Z

0

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
  });

answered Jun 30, 2017 at 16:35

Bogdan T Stancu

4045 silver badges7 bronze badges

Comments

mohit · Accepted Answer · 2018-10-12 04:32:05Z

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;});

});

scorpiox · Accepted Answer · 2014-09-19 19:46:57Z

-1

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

answered Sep 19, 2014 at 19:46

scorpiox

491 silver badge1 bronze badge

Collectives™ on Stack Overflow

ng-model is not getting changed in ui-select

9 Answers 9

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related