I am facing an issue with a select dropdown in my code. I am using ng-repeat to populate the dropdown like this:
<select ng-model="tstCtrl.model.value" required>
<option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
</select>
Once an option is selected, the binding to model.value works as expected. However, initially the selected dropdown option does not seem to be bound to the value that model.value is set to.
This issue can be seen in the example below:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module('Test', []).controller('TestController', function(){
this.model = {
value:3
};
this.myOptions = [
{a:1, b:"one"},
{a:2, b:"two"},
{a:3, b:"three"},
{a:4, b:"four"},
{a:5, b:"five"}];
});
</script>
</head>
<body ng-app="Test" ng-controller="TestController as tstCtrl">
{{tstCtrl.model.value}}
<select ng-model="tstCtrl.model.value" required>
<option ng-repeat="option in tstCtrl.myOptions" value="{{option.a}}">{{option.b}}</option>
</select>
</body>
</html>The provided snippet should clearly demonstrate the issue. Feel free to ask me any questions you may have.
Any suggestions on how to resolve this problem would be greatly appreciated!
Thank you!