JQueryMobile select element not working within AngularJs ng-switch directive - angularjs

Question

I have this HTML:
<div ng-switch on="MyViewType">
<div ng-switch-when="B">
<select id="selectCatagoryFood2" data-role="listview" data-native-menu="true" ng-options="foodCatagory as foodCatagory.Description for foodCatagory in foodCatagories" ng-model="foodCatagory" ng-change="changeFoodCatagory(foodCatagory)">
</select>
</div>
</div>
The select appears empty and do nothing if I select another value.
Example (the first "select" works correctly, but the second doesn’t show selected value): http://plnkr.co/edit/yrXa70?p=preview
The problem is similar to this other post, but this solution doesn’t work (the “Refresh” launches an exception).
Select Value not Init in AngularJs and JQueryMobile
I think the problem is that this directive (ng-switch) removes and adds elements from the DOM and JQuery Mobile loses some objects created in the initializations of the elements.

Answer 1

Code from your example:
var unbindWatcher = scope.$watch(attrs.ngModel, function(newValue, oldValue) {
if (newValue && oldValue === undefined) {
element.selectmenu('refresh');
unbindWatcher();
}
});
The element.selectmenu('refresh'); will be called when ngModel (which is the selected option) gets a new value and the old value is undefined.
This will work for the first select because it will:
First get rendered and initialized as a select menu by jQuery Mobile
Later get new data and be refreshed
However, in the second case, the HTML inside <div ng-switch-when="B"> will not get rendered until MyViewType is actually B, which is at the same time the data for the select is ready.
This means two things:
When the code in the $watch gets executed for this element, the ngModel will already be available, both newValue and oldValue will be Object {Description: "1"}, and the if statement will not be executed.
If you tried to call element.selectmenu('refresh'); it would throw
an error, as the element has not yet been initialized as a
select menu by jQuery Mobile.
If you want to populate the select menu with data from the $scope and the data is available at time of initialization, I would:
Tell jQuery Mobile not to automatically turn the select into a select menu by setting data-role="none"
Turn in into a select menu manually by calling element.selectmenu(); from the directive
Otherwise you would need a good way to know when the element has been rendered and initialized by jQuery Mobile, then call refresh.
Modified directive for both cases:
var unbindInitializationWatch = scope.$watch(attrs.ngModel, function(newValue, oldValue) {
if (newValue && oldValue === undefined) {
element.selectmenu('refresh');
unbindInitializationWatch();
} else if (newValue && oldValue) {
element.selectmenu();
unbindInitializationWatch();
}
});
Working example: http://plnkr.co/edit/9jR7ko3j8ugUr1suB8ws?p=preview
Note that ngSwitch creates a new scope, and in order for the both select menus to share selected option I have in the example moved the model for the selected option into an object (More on this here if not familiar with how it works).
Also added an additional $watch to sync the both select menus.