get selected value in angular ng-option

Question

I have an object like bellow:

var data = {
    BCS: ['a', 'b', 'c', 'd'],
    HND: ['e', 'f', 'g', 'h'],
    LMU: ['i', 'j', 'l', 'm']
};

And Bellow is my controller

function getDivision($scope) {
    $scope.divisions = data;
}

And this is model

<div ng-app>
    <div ng-controller='getDivision'>
        <select ng-model="key" ng-options="key for (key , val) in divisions" ng-change="update()"></select>
        <select ng-model="divisionValues" ng-options="value for value in key"></select>
    </div>
</div>

This is JsFiddle

How can i get first selected value and parse it to the controller ?

Answer 1

Your expressions should look like the following:

<select ng-model="key"ng-options="key as key for (key, val) in divisions"
ng-change="update()"></select>

<select ng-model="divisionValues"
ng-options="value for value in divisions[key]"></select>

This combination will allow your users to select from the keys of data , and once they do, the second select box will contain the four letters associated with them in the associated value array.

The expressions are tricky and hard to understand at first, but if you read the docs a few times and experiment, it will all make sense.

Working Fiddle

Answer 2

You have to pass the key to the update method like ng-change="update(key)"

Working Demo

html

<div ng-app>
    <div ng-controller='getDivision'>
        <select ng-model="key" ng-options="key as key for (key, val) in divisions" ng-change="update(key)"></select>
        <select ng-model="divisionValues" ng-options="value for value in divisions[key]"></select>
    </div>
</div>

script

var data = {
    BCS: ['a', 'b', 'c', 'd'],
    HND: ['e', 'f', 'g', 'h'],
    LMU: ['i', 'j', 'l', 'm']
};

function getDivision($scope) {
    $scope.divisions = data;
    $scope.update = function (a) {
        console.log(a);
    }
}