Angualrjs <select> ng-model adds strange string - html

Question

In my angular js application I have used as follows
<select id='baseline' class="form-control" ng-model='vm.modal.baseline'>
<option ng-repeat='base in vm.baseline' ng-value='base'>{{base}}</option>
</select>
Then in my controller
vm.baseline = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
vm.modal = {baseline: '3'};
but select is not defaulting to 3 instead it adds
<option value="? string:3 ?"></option>
What should I do to set the default value as 3? Thank you.

Answer 1

There is a problem with your controller AS syntax, it is working correctly with $scope see the eg with your code.
https://jsfiddle.net/6r5Lnasb/
<div ng-app ng-controller="LoginController">
<select id='baseline' class="form-control" ng-model='modal.baseline'>
<option ng-repeat='base in baseline' ng-value='base'>{{base}}</option>
</select>
</div>
function LoginController($scope) {
$scope.baseline = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
$scope.modal = {baseline: '3'};
}

Answer 2

It doesn't work because ng-model value is a string and option value is number.
Change vm.modal = {baseline: 3}; or convert baseline to array of strings vm.baseline = ['1', '2', '3' ...];

Answer 3

Try replacing these two lines
vm.baseline = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
vm.modal = {baseline: '3'};
with below lines
vm = {
baseline: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
modal: {
baseline: '3'
}
}
As the variable vm is not defined/declared something like var vm; or var vm = {}; or var vm = null assigning an array value or any value to a property of an undefined variable will throw an error hence it was not working.
if you have seen your browser console you might have got some similar looking error: TypeError: Cannot set property 'baseline' of undefined