getting the ng-object selected with ng-change

Question

Given the following select element

<select ng-options="size.code as size.name for size in sizes "          ng-model="item.size.code"          ng-change="update(MAGIC_THING)"> </select> 

Is there a way to get MAGIC_THING to be equal to the currently selected size, so I have access to size.name and size.code in my controller?

size.code affects a lot of the other parts of the app (image urls, etc), but when the ng-model of item.size.code is updated, item.size.name needs to be updated as well for the user facing stuff. I assume that the correct way to do this is capturing the change event and setting the values inside of my controller, but I'm not sure what I can pass into update to get the proper values.

If this is completely the wrong way to go about it, I'd love to know the right way.

Answer 1

Instead of setting the ng-model to item.size.code, how about setting it to size:

<select ng-options="size as size.name for size in sizes"     ng-model="item" ng-change="update()"></select> 

Then in your update() method, $scope.item will be set to the currently selected item.

And whatever code needed item.size.code, can get that property via $scope.item.code.

Fiddle.

Update based on more info in comments:

Use some other $scope property for your select ng-model then:

<select ng-options="size as size.name for size in sizes"     ng-model="selectedItem" ng-change="update()"></select> 

Controller:

$scope.update = function() {    $scope.item.size.code = $scope.selectedItem.code    // use $scope.selectedItem.code and $scope.selectedItem.name here    // for other stuff ... } 

Answer 2

You can also directly get selected value using following code

 <select ng-options='t.name for t in templates'                   ng-change='selectedTemplate(t.url)'></select> 

script.js

 $scope.selectedTemplate = function(pTemplate) {     //Your logic     alert('Template Url is : '+pTemplate); }