My js array is ["standard", "premium"]
When I click on the dropdown option for the first time, it’s showing option as standard and premium. After choosing any one of them the chosen values is not displayed in the box. If I do click again (assume I have selected standard in the first go) then it’s giving options as s,t,a,n,d,a,r,d.
My code is:
<select id = "red", ng-model="red" class= "form-select">
<option ng-repeat=" r in red">[[red]]</option>
</select>
You are using the same variable name for the list you iterate through the ng-repeat and the ng-model.
The ng-repeat is the list of options of the select.
The ng-model stores the selected value.
In your code, both the list and the ng-model have the same name, so when you select something in the dropdown, the ng-repeat splits the selected value red ( ng-model) and gives this bug.
Use different variable names for ng-model and ng-repeat and the bug will resolve.
var myApp = angular.module('myApp', []);
function LoginController($scope) {
$scope.options = ["standard", "premium"];
$scope.red = null;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="LoginController">
<select id = "red", ng-model="red" class= "form-select">
<option ng-repeat="option in options">{{option}}</option>
</select>
<br/>
{{red}}
</div>