Unable to get selected option using Angular JS

Question

Work on getting the selected variant of the select tag using Angular JS. I get the attribute value as "1,2 ..", I need "one, two ... when I change the select tag.

My sample code

Js

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($timeout, $scope) {
$scope.countList = [
    { id: 1, name: 'One' },
    { id: 2, name: 'Two' },
    { id: 3, name: 'Three' }
];
$scope.countSelected = $scope.countList[0].id;    
alert('Selected count ID: ' + $scope.countSelected);

    $scope.onchange = function(id) {
    alert("id:"+id);
    }
});

HTML

<div ng-controller="myCtrl">
Count:
<select ng-model="countSelected" 
        ng-options="count.id as count.name for count in countList" ng-change="onchange(countSelected)">
</select>
</div>

Here is the fiddle .

Answer 1

Try this one

http://jsfiddle.net/TXJE6/8/

<div ng-controller="myCtrl">
    Count:
    <select ng-model="countSelected" 
    ng-options="count.id as count.name for count in countList" ng-change="onchange(countList[countSelected-1])">
    </select>
</div>

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($timeout, $scope) {
    $scope.countList = [
        { id: 1, name: 'One' },
        { id: 2, name: 'Two' },
        { id: 3, name: 'Three' }
    ];
    $scope.countSelected = $scope.countList[0].id;    
    alert('Selected count ID: ' + $scope.countSelected);

    $scope.onchange = function(id) {
        alert("id:"+id.name);
    }
});

Answer 2

just bind the jquery change in the dropdown when you call the controller, or when the promise finishes loading data like this

 $('#ddl').change(function () {
            console.log($('#ddl option:selected').val());
 });