Can not get the value after selecting from drop down list using Angular.js

Question

I have an issue.I can not fetch value from drop down list using Angular.js. I am explaining my code below.

    <select class="form-control"  id="user_name" ng-model="user_name" ng-options="user.name for user in listOfUser track by user.value " >
    </select>
<input type="button" class="btn btn-success" ng-click="sendEvoucherCode();"  id="addProfileData" value="SEND"/>

$http({
            method:'GET',
            url:"php/getUserId.php",
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function successCallback(response){
            //console.log('user id',response);
            angular.forEach(response.data,function(data){
                var obj={'name':data.userid,'value':data.userid};
                $scope.listOfUser.push(obj);
            })
        },function errorCallback(response) {
        })

$scope.sendEvoucherCode=function(){
        console.log('check',$scope.user_name);

    }

Here when i am selecting value from drop down lost and clicked on any button,inside that function i can not get any value bu using this console console.log('check',$scope.user_name.value); .Here i need to retrive the selected value.Please help me.

Answer 1

Take a look to Shb's comment. Your calling the method (on ng-change) removeBorder with the parameter 'user_name' which is a String. But you want the variable named user_name . So change your method call to removeBorder(user_name) .

EDIT:

The code is working. See this plunker .