2

I have this below html

<select name="reason" class="form-control" ng-model="reasonSelected" 
ng-options="reason for reason in reasonList" required></select>

and in the beginning of my angular controller I have

$scope.reasonSelected = $scope.item.stsChangeReason;
$log.debug("$scope.reasonSelected = " + $scope.reasonSelected);

which is printing this below to console but still no default

LOG: $scope.reasonSelected = someValue

and in some other init function I have 

$scope.reasonList = response;

If I do 

$scope.reasonSelected = $scope.reasonList[0];

then I see a default value. Am I missing something obvious here?

yalkris
  • 2,596
  • 5
  • 31
  • 51

3 Answers3

3

This is a common mistake in AngularJS. In order to be set as a default, you need to make sure the reasonSelected scope variable is holding a reference to the desired reasonList scope array variable item (as you are seeing in your investigation).

The answer to your question is going to vary slightly based on whether you're working with an array of strings or objects or something else.

Edit: The problem is your ng-options arguments are incorrect. Use the select as label for value in array comprehensive expression. Note the as.

<select name="reason" class="form-control" ng-model="reasonSelected" 
    ng-options="reason as reason for reason in reasonList" required></select>

Assuming an array of strings: http://plnkr.co/edit/06c5pQ?p=preview

user12121234
  • 2,519
  • 2
  • 25
  • 27
0

I'd have to see the data you're using for the ng-options, but it sounds like you don't have it initialized properly to the values you want. You may need to do something like ng-options="reason.id as reason.name for reason in reasonList", depending on your data, but from the sound of it doing $scope.reasonSelected = $scope.reasonList[0]; sounds pretty normal. Check out this other answer to the same question:

https://stackoverflow.com/a/17329854/1078450

Community
  • 1
  • 1
wesww
  • 2,863
  • 18
  • 16
0

I did this and it worked

$scope.reasonSelectedSaved = $scope.item.stsChangeReason;

inside init function

$scope.reasonList = response;
$scope.reasonSelected = $scope.reasonSelectedSaved;

and using a watch I updated newly selected reason

$scope.$watch('reasonSelected', function () {
        $scope.item.stsChangeReason = $scope.reasonSelected;
    });
yalkris
  • 2,596
  • 5
  • 31
  • 51
  • This is a hack and introduces an unnecessary watch. If you have time, read the ng-options directive documentation and try to understand that you need to have your ng-model value reference the item in your options array. – user12121234 Aug 12 '15 at 22:15
  • My requirement is to display the current value and display the list from the server though the list contains the current value. Current value can change to any value in the list so I adding a fixed reference is not possible in my case. I will take another look and see if I can fix that. Your suggestion definitely helped. – yalkris Aug 13 '15 at 14:32
  • Hey @yalkris I had time to update my answer. Check it out. Thanks. – user12121234 Aug 13 '15 at 22:39