AngularJS - Chosen ng-model is not working properly

Question

I'm trying to get value when I select an option from an AngularJS chosen localytics dropdown. Here's the code for the dropdown:

<select chosen style="width: 250px"
        ng-model="StudentId"
        ng-options="allStudent.StudentId as allStudent.Name for allStudent in allStudent">
        <option value="">Select</option>
</select>
<h2>Chosen with static options: {{ StudentId }}</h2>
<input type="button" value="Search" ng-click="GetStdCourseList(StudentId)">

And in my controller I have the following function:

    $scope.GetStdCourseList = function (StudentId) {
        alert(StudentId);
    };

When I use alert then it show me 'Undefined' instead of showing value How can I solve this?

Actually this is ok and I get value when I'm not using chosen search but when I use 'chosen' then it's not working.... Here is the screenshot:

Thanks a lot.

Answer 1

I think you have not selected any options before clicking the button. This works fine for me when I select the option.

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.allStudent = [{StudentId: 0, Name: 'name1'}, {StudentId: 1, Name: 'name2'}]; $scope.GetStdCourseList = function (StudentId) { alert(StudentId); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <select chosen style="width: 250px" ng-model="StudentId" ng-options="allStudent.StudentId as allStudent.Name for allStudent in allStudent"> <option value="">Select</option> </select> <h2>Chosen with static options: {{ StudentId }}</h2> <input type="button" value="Search" ng-click="GetStdCourseList(StudentId)"> </div> 

Answer 2

well, since ng-model's object is $scope.something itself, try to

replace

alert(StudentId)

become

alert($scope.StudentId)

and i don't think on this case you will need param. just ignore it because $scope covered it for you

that's will do

edited for better readability