I am having trouble retrieving the default value of my dropdown list using angular.js. Below is an explanation of my code:
<th>
<select style="width:100%; border:none; font-weight:bold;" ng-options="sub.name for sub in noCourse track by sub.value" ng-model="search" ng-change="selectedCourseTable();" >
<option value="">Course Name</option>
</select>
</th>
Here, I am fetching data dynamically and binding it in a select tag. The above code generates the following HTML output:
<select style="width:100%; border:none; font-weight:bold;" ng-options="sub.name for sub in noCourse track by sub.value" ng-model="search" ng-change="selectedCourseTable();" class="ng-valid ng-touched ng-dirty ng-valid-parse">
<option value class selected="selected">Course Name</option>
<option value="Master of computer application" label="Master of computer application">Master of computer application</option>
<option value="Bachelor of Technology" label="Bachelor of Technology">Bachelor of Technology</option>
<option value="Master in Technology" label="Master in Technology">Master in Technology</option>
</select>
subjectController.js:
$scope.selectedCourseTable=function(){
if($scope.search.value=='Bachelor of Technology'){
alert($scope.search.value);
}
if($scope.search.value=='Master in Technology'){
alert($scope.search.value);
}
if($scope.search.value=='Master of computer application'){
alert($scope.search.value);
}
if($scope.search==''){
alert($scope.search.value);
}
}
In this code, I am unable to check when the user selects the text "Course Name" in the ng-change event. I can check the other select options by using $scope.search.value, but when the user selects the default text "Course Name", it cannot be checked. Can someone help me resolve this issue?