Fetch data from select-options field in Angular - angularjs

Question

In my HTML code I have a select-options field with ng-model. Want to register it's value in my controller and see every time when it will be changed. However console.log() displays it as undefined. I tried $scope.$watch but it didn't work as well. How can I solve that problem?
<select ng-model="selectedAge">
<option value="none">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

Answer 1

according to your requirement using watch is the solution. write watch like this
$scope.$watch('selectedAge', function(newVal, oldVal) {
console.log(newVal)
})
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.obj = {};
$scope.obj.showSelect = true
$scope.$watch('obj.selectedAge',function(newVal, oldVal){
console.log(newVal)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-if="obj.showSelect">
<select ng-model="obj.selectedAge">
<option value="none">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div></div>
EDITED
You must create empty object inside controller like this.
angular.module("app", [])
.controller("ctrl", function($scope) {
$scope.obj = {};
$scope.obj.showSelect = true
$scope.$watch('obj.selectedAge', function(newVal, oldVal) {
console.log(newVal)
})
})
Check the updated demo above.
The reason is ng-if directive, like other directives creates a child scope. so you need to create a object and assign value trough that object.
PS
try to use ng-change instead of $scope.$watch(); because $watch is a bad practice for angular app performance.

Answer 2

No need to use $watch as $watch create performance issue.Simply Use ng-change
<select ng-model="selectedAge" ng-change="selectAge()">
Working example