Currently, I am attempting to extract values from a select element and incorporate them into the scope while ensuring that they remain updated. Typically, this task would be achieved using ng-model without any issues. However, in this particular scenario, I require the select element to not be Angular powered due to specific workflow constraints.
The challenge lies in figuring out how to introduce the ng-model reference without encountering the additional blank option that is automatically inserted when no ng-options array is provided.
Is there a workaround available to achieve the desired outcome? I acknowledge that the empty default value appears because I have not specified any options or as options.language does not exist within my scope by default. My question is, can this issue be bypassed in some way?
The ultimate objective is to attach this controller to any form, assign the selects with ng-model="options.myOption", and seamlessly retrieve all those options whenever needed within the controller's scope.
Test Example:
<select name="language" ng-model="options.language">
<option value="en_US">English</option>
<option value="fr_FR">French</option>
<option value="es_ES">Spanish</option>
<option value="de_DE">German</option>
<option value="zh_CN">Chinese</option>
<option value="ja_JP">Japanese</option>
</select>
Sample JavaScript Code:
var app = angular.module('myApp', [])
.controller("myController", ['$scope', '$log', function($scope, $log){
$scope.options=[];
$scope.$watch("options.language", function(){
$log.log($scope.options.language);
});
}])
JS Fiddle Link: http://jsfiddle.net/CgRZn/