I am experiencing an issue with my ng-model statements, where all of them are working except for the one on the select tag. To provide context, imagine a page displaying a list of devices, and when one is clicked, a specific function is executed:
/* Opens the unit popup page for TX units */
this.openTxUnitPopup = function (row) {
var txUnitForPopup = myScope.txUnits.find(function (unit) {
return unit.mac == row.entity.mac;
});
$scope.config.txUnitForPopup = txUnitForPopup.clone();
$scope.config.showTxPopup = true;
};
This function is intended to prepare data for a modal dialog. The HTML markup containing the ng-model statements is as follows. Despite all other form elements being properly filled out based on the model when the modal pop-up appears, the select box does not have a selected channel. I have confirmed through debugging that the channel value changes when selecting an option, but the select box does not show the pre-filled selection like the other form elements do upon the initial appearance of the modal.
<div class="form-column">
<span class="info-label">Part:</span>
<div class="my-form-control">{{config.txUnitForPopup.part}}</div>
<span class="info-label">MAC:</span>
<div class="my-form-control">{{config.txUnitForPopup.mac}}</div>
<span class="info-label">Channel:</span>
<select class="my-form-control" ng-model="config.txUnitForPopup.channel">
<option
ng-repeat="unit in myScope.txUnits"
value="{{unit.channel}}">{{unit.channel}}
</option>
</select>
<span class="info-label">Name:</span>
<input class="my-form-control" ng-model="config.txUnitForPopup.info.name">
<span class="info-label">Manufacturer:</span>
<input class="my-form-control" ng-model="config.txUnitForPopup.info.manufacturer">
<span class="info-label">Model:</span>
<input class="my-form-control" ng-model="config.txUnitForPopup.info.model">
<span class="info-label">Serial #:</span>
<input class="my-form-control" ng-model="config.txUnitForPopup.info.serial">
</div>