ng-options Doesn't Rebind After Scope Variable Change

[alanjames1987]

If the variable used in ng-options changes after the view is rendered the select box does not rerender.

This makes this plugin unusable when getting select options from an AJAX call.

Is there a way to get around this? Is the a bug that needs to be looked into?

[WalterInSH]

+1

[Rippatel]

I find out temporary solution for me.
I don't know how I can create watch on ng-options, so I used another way to refresh it.

Step1:
Created another attribute called 'options', assign it an object which you are looping in 'ng-options'.
Example: ng-options='item.id as item.name in for item in users' options='users'
Step2:
In angular-bootstrap-select.js file, add watch on this 'options' in function called selectpickerDirective.
Example: function selectpickerDirective($parse, $timeout) { ....
add code after ngDisabled watch:
if (attrs['options']) {
scope.$watch(attrs['options'], function (value) {
if (value) {
scope.$applyAsync(function () {
element.selectpicker('refresh');
});
}
}, true);
}

Whenever you will update ng-options, it will get refreshed.

[madmoizo]

I wanted the same behaviour, so i looked into the code (test/select.js) and....

If you want to "watch" your option's value, use "track by" in ng-options

example:

<select selectpicker 
     data-width="100%"
     data-style="btn-select" data-none-selected-text=""
     ng-model="filter.value" 
     ng-change="updateFilters()"
     ng-options="option.value as option.label for option in options track by option.value"></select>

Hope it'll help

[GBora]

@frlinw thanks you're a life saver

[Rippatel]

Hi @frlinw,
Thanks for the solution, but it will only work when you have any option selected.
Let say, I have a screen with 2 selects A & B. A is static select and based on it's selection I am updating B dynamically. When page loads, if I will first select option in B and then in A, it will work. When I will first select option in A and try to build B dynamically, it will update option values but you can't see it until you will not select option in B with pre-loaded values. After selecting pre-loaded value in B, it will display updated options in B.

[madmoizo]

It's a particular use case, maybe there is a better way. (jsfiddle example ?)

[jlzavitz]

+1

[nelisbijl]

This directive overrides the $render method which causes the ng-options to never get rendered.
By calling the previous render as well, things are solved:

              var superRender = ngModel.$render;
              ngModel.$render = function () {
                  superRender();
                  scope.$evalAsync(function () {
                      element.selectpicker('refresh');
                  });
              }

[bmanturner]

@nelisbijl +1. Works for me.

[yugandharBellam]

@bmanturner , @nelisbijl
i dont know where to place that code, i placed in my app.js , but not working

[nelisbijl]

@yugandharBellam, you need to put this code inside the source code of angular-bootstrap-select.
I no longer use this package
By then I should have created a pull request but my knowledge of Git prevented me from doing so

[pratibhaarora]

Thanks