Spending more than 4 hours trying to figure out why my ng-model directive was not correctly binding with ng-options within my controller was frustrating. The <select> element seemed to be initialized properly, receiving a value from the parent scope, but the child scope was not updating the parent scope as expected. After researching and experimenting with various solutions, I finally found a workaround for this issue:
Found helpful information in this Stack Overflow question
Also, found a useful answer in this Stack Overflow question
Here's the basic Plunker I referred to
I discovered that the property I was binding to in my <select> element was actually bound to a property with the same name within a child scope of the controller, hence the value was not reflecting as expected in the controller's scope. Making the following adjustments:
<select ng-options="asset as asset.Name for asset in allAssets" ng-model="selectedAsset" ng-change="lookupAssetPermissions()"></select>
to
<select ng-options="asset as asset.Name for asset in allAssets" ng-model="$parent.selectedAsset" ng-change="lookupAssetPermissions()"></select>
Allowed me to correctly bind the value in selectedAsset to the property in the controller's scope (verified in the ng-change event handler). The entire structure of my <select> element now looks like this:
<!---outer div has controller level scope----->
<div>
<!---inner div creates child scope with ng-if----->
<div ng-if="true condition here">
<!---select statement from above----->
<select ng-model="$parent.selectedAsset">...</select>
</div>
</div>
Are there any alternative solutions in this situation other than explicitly binding to the parent scope? If dealing with multiple child scopes (nested ng-if statements), would I have to adjust the ng-model to bind to
$parent.$parent.$parent....selectedAsset