ng-model scope not available while using with ng-options

Question

I am just trying to implement a simple drop down and here is my code

<select ng-change="selectTestSuite();" ng-model="testCase" ng-options="testSuite.TEST_NAME for testSuite in publicTestCase"></select>

In the controller when I am trying to print value of testCase in console it is giving undefined. But When I try to print id of testCase using

{{testCase.TEST_ID}}

It is giving me id. I have also checked by using $watch

$scope.$watch('testCase',function() {
   console.log($scope.testCase);
});

Unable to figure out where I am making mistake.Appreciate any help.

Answer 1

I think no problem with ng-options.

Actually ng-options maps the "testSuite.TEST_NAME" as model to ng-model.

Ensure the "testSuite.TEST_NAME" is available in "publicTestCase" collection (Whether it is undefined).

Answer 2

You are binding the testCase to testSuite.TEST_NAME. Your ng-options should look like this:

<select ng-change="selectTestSuite()" ng-model="testCase" ng-options="testSuite as testSuite.TEST_NAME for testSuite in publicTestCase"></select>

The model gets bind to the value of testSuite from the records in the publicTestCase array and for each of the testSuite you want the testSuite.TEST_NAME to be shown as the options text.

Answer 3

enter image description here

Note:- Please find the image link.image contains code ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage:

Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.