AngularJS ng-change event for select not firing after jQuery UI Selectmenu

Question

I have the following part of VIEW code:

<select class="my_select_class" id="my_select_id" name="my_select_name" ng-model="my_select_model" ng-change="my_func()">
    <option value="val1">val1</option>
    <option value="val2">val2</option>
</select>

Also i have my function

    $scope.my_func() = function () {
        console.log('Fire!');
};

While everything is OK. Event is triggered.

But when i bind my select with jQuery UI Selectmenu:

$('.my_select_class').selectmenu({ style: 'new_style' });

after that event ng-change no more fires.

How do you think is this behavior is connected with display: none style after selecmenu is applied?

Answer 1

When you call .selectmenu() method, the original <select> is hidden (display:none) and a brand new tree with <ul> and <li> is generated.

For example on the JQuery UI demo page for SelectMenu, you can activate your browser's developper toolbox and then see this underlying source :

1: the original <SELECT>, now hidden

<select name="speed" id="speed" style="display: none;">
    <option>Slower</option>
    <option>Slow</option>
    <option selected="selected">Medium</option>
    <option>Fast</option>
    <option>Faster</option>
</select>

2: the code generated by JQuery UI

<div class="ui-selectmenu-menu ui-front" style="top: 78.5px; left: 17.5px;">
    <ul aria-hidden="true" aria-labelledby="speed-button" id="speed-menu" class="ui-menu ui-widget ui-widget-content ui-corner-bottom" role="listbox" tabindex="0" aria-activedescendant="ui-id-1" aria-disabled="false" style="width: 198px;">
      <li class="ui-menu-item ui-state-focus" id="ui-id-1" tabindex="-1" role="option">Slower</li>
      <li class="ui-menu-item" id="ui-id-2" tabindex="-1" role="option">Slow</li>
      <li class="ui-menu-item" id="ui-id-3" tabindex="-1" role="option">Medium</li>
      <li class="ui-menu-item" id="ui-id-4" tabindex="-1" role="option">Fast</li>
      <li class="ui-menu-item" id="ui-id-5" tabindex="-1" role="option">Faster</li>
    </ul>
</div>

Therefore all attached directives like ng-model, ng-change are attached to a no-longer used DOM element. It seems that AngularJS couldn't work in that conditions.

Best regards,