ng-model gets defaulted correctly, but select won't show the text, shows blank instead

Question

So, I'm trying to read a list of options from the server, and supply it to tag, with the first option as default - which is really important thing to do - but all I've got is the model is being set correctly, but in the select it shows blank!, and I have no idea why is that!

I've tried a lot of SO soulations, here, here, and here.

view:-

<select ng-options="option as option.Name for option in options track by option.ID" ng-model="selected">

controller:-

DataService.getOptionsFromServer().then(function (result) {
    //console.log(result.data);
    $scope.options = result.data;
    $scope.selected = $scope.options[0];
    console.log($scope.selected);
}, function (err) {
    console.error(err);
});

the

console.log($scope.selected);

shows that the selected is being set correctly! any help?

Update1: Seems the problems is compatibility between angular and jquery-mobile (not added by me :@), anybody knows something about that?

Update2: when removing jquery.mobile.min.js, it works fine. unfortunately, I need it throw out the project.

Update3: the problem is that JQM produce a span to display the value selected, and that's the problem!, I've binded the select, not the span. the problem is that I can't bind the span till now, 'cuase JQM generate the span in the runtime :( , that's why when commenting out the JQM js it works fine.

Updated4: solved :D, solution given below for future reference.

Answer 1

the problem is that JQM doesn't display the selected value itself, instead it gets the selected value, and put into a span in run time, and then hides the select completely, trust me, it took me > 12 hours to learn it the hard way!

so in order for JQM to re-get the selected value from the select and send it to displaying span, you have to call:

jQuery("#SelectId").selectmenu("refresh", true);

notice that in case you're using angular like me, it's better to use "jQuery" not "$" to avoid conflict between angular and jQuery.

don't take that one line solation lightly :D, it cost more than a working day to get it :D, hope it would be helpful :D .

importent ref: here.

also note: you can make an angular directive if you intend to use the select more than once :D .