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?

Improve this question
4
  • could you add your html please? Commented Aug 12, 2015 at 20:11
  • There was some formatting issue while adding my question. I added it now. Please take a look. Commented Aug 12, 2015 at 20:16
  • Are you sure $scope.item.stsChangeReason is giving you a value that is present in the $scope.reasonList collection? Commented Aug 12, 2015 at 20:33
  • how reasonList array looks like?? Commented Aug 12, 2015 at 20:34

3 Answers 3

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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

Improve this answer

Comments

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;
    });
Improve this answer

3 Comments

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.
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.
Hey @yalkris I had time to update my answer. Check it out. Thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.