Question

How to use a flip toggle switch with AngularJS and jQuery Mobile?

The following snippet contains a flip toggle switch that does not get selected by angular and a commented checkbox that does get checked by angular:

<div data-role="content">
  <ul id="pumps" data-role="listview">
    <li ng-repeat="pump in fleetManager.pumps"
      ngm-click="fleetManager.toggleBuzzer(pump)"><span>{{pump.sn}}</span>
      <span>
        <!-- FIXME: does not select the marked option -->
        <select data-role="slider">
          <option value="silent">Silent</option>
          <option value="beeping" ng-selected="pump.status!=0">Beeping</option>
        </select>
        <!-- NOTE: this one works as expected -->
        <!--input type="checkbox" ng-checked="pump.status!=0"-->
    </span></li>
  </ul>
</div>

Answer 1

adding an ng-model attribute to the <select> tag got it working:

<select data-role="slider" ng-model="somemodel">
    <option value="silent">Silent</option>
    <option value="beeping" ng-selected="true">Beeping</option>
</select>