Select box not updating when model is changed programmatically

Question

I have a select box in a popup that i assign an initial value without any problems. However, I want to change the select boxes value when I open the popup the issue is that although it "ticks" the changed value it does not show it in the select box unless I open and close the popup again. Any solutions to making the select box update so that when I open the pop up for the first time the value assigned is showing?

Note: in production i am using angularJs to populate the select box and jqmobile to render it.

Here is the fiddle and the code: https://jsfiddle.net/AKMorris/ufcasngf/6/

  <button ng-click="openPopup()">open popup</button>
  <div data-role="popup" id="mypopup" data-overlay-theme="d" data-theme="none">
    <select id="fcComparator" 
            ng-model="ccEditorFcComparator"
            ng-options="fcEnumComp for fcEnumComp in ccEditorDefaultComparators"
            >
    </select>
  </div>

the js:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.ccEditorDefaultComparators = ["=","!="];
    $scope.ccEditorFcComparator = "!=";

  $scope.openPopup = function()
  {
    $('#mypopup').popup();
    $('#mypopup').popup('open', { y: 0 });

    console.log("should switch to = now");
        $scope.ccEditorFcComparator = "=";

        //this makes it work the second time you open the popup
    $('#fcComparator').selectmenu('refresh');
  }
});

Answer 1

If you change the value of the select using the jQuery function (.option()) for selectmenu, it updates the select box properly.

Ng-repeat solution:

JSFiddle Demo

Ng-options Solution:

JSFiddle Demo

NOTE: You need to separetely assign the ng-model variable also for this fix to work.

JS:

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.ccEditorDefaultComparators = ["=","!="];
    $scope.ccEditorFcComparator = "!=";
  
  $scope.openPopup = function()
  {
    $('#fcComparator').selectmenu('refresh');
    $('#mypopup').popup();
    $('#mypopup').popup('open', { y: 0 });
    console.log("should switch to = now");
        $('#fcComparator').val("=");
        $scope.ccEditorFcComparator = "=";
        //this makes it work the second time you open the popup
    $('#fcComparator').selectmenu('refresh');
  }
});

References:

1. jQuery Select Menu Documentation

Answer 2

Would it be an option to just create another controller for the popup and set the selected option there?

HTML

<div data-ng-app='myApp' data-ng-controller='myCtrl'>

  <button id="popup-btn" ng-click="openPopup()">open popup</button>

  <div data-role="popup" id="mypopup" data-overlay-theme="d" data-theme="none" ng-controller="myPopup">
    <select id="fcComparator" 
       ng-model="ccEditorFcComparator"
       ng-options="fcEnumComp for fcEnumComp in ccEditorDefaultComparators">
    </select>
  </div>

</div>

Javascript

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $timeout) {
  $scope.openPopup = function()  {
    $('#mypopup').popup();
    $('#mypopup').popup('open', { y: 0 });
  }
});

app.controller('myPopup', function($scope, $timeout) {
    $scope.ccEditorDefaultComparators = ["=","!="];
    $scope.ccEditorFcComparator = "=";
});

https://jsfiddle.net/wjjafupf/