Angularjs compatible

[PsyStorm25]

This version is compatible with angularjs select list generated with ng-options.
The code added could maybe be write in a nicer way, feel free to do so.

[webermax]

@PsyStorm25 thank you very much for your contribution. unfortunately i still have issues using your patched file. using the angular directive ng-repeat together with ng-model to create select options an empty select option is always displayed.

[PsyStorm25]

Hello webermax,

I think this is an expected behavior from angularjs and it is not dependent on dropdown.js

The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options. This happens to prevent accidental model selection: AngularJS can see that the initial model is either undefined or not in the set of options and don't want to decide model value on its own.
http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select

Once an option is selected and so ng-model set, the empty option should disappear.

If you are talking about a different issue, please provide more details (code example) and I could see how to adapt the file.

[PsyStorm25]

Here is an example showing the default behavior of angularjs with drop down list:
http://codepen.io/PsyStorm25/pen/zBQXaB

[webermax]

ok, i see. the problem occurs when relying on "some black magic casted by a evil wizard" and the select element is loaded within an angular template.

[PsyStorm25]

I have added a new version fixing some minor issues.

[PsyStorm25]

webermax,

Well for me it is working (based on the information you shared).
Be sure to set the 'autoinit' property if you are dynamically loading and injecting a 'select/options' control in the DOM:
$(".select").dropdown({ "autoinit" : ".select" });

Here you can find an example containing 2 drop down lists:
http://codepen.io/PsyStorm25/pen/mENXxz

The first one is a ‘select’ generated from markup in the page.
Initially it is empty.
Below you have 3 buttons to play with:
‘LOAD ITEMS’ is adding items in the list after 1s (to mimic ajax loading)
‘CHANGE ALL ITEMS’ is changing all the collection by a new one
‘CHANGE ITEM LABE’ is changing the item label at index 3
‘ADD ITEM AT INDEX 2’ is adding a new item in the middle of the collection at index 2.

The second drop down list is the one that could interest you I think.
I have created a simple directive using a template to demonstrate it is also working this way.

Hope this helps.

[PsyStorm25]

Big update on the file.
It is now compatible with optgroup elements and can be combined with angularjs also.

I also changed the use of DOMNodeInserted and DOMNodeRemoved with the more recent MutationObserver because there was a problem I noticed only with Firefox when the select input was loaded from angularjs SPA page (single page application).

[PsyStorm25]

I fixed a bug on IE when there was an empty value in the dropdown.