Binding ng-click argument object keys to scope properties? - angularjs

Question

I'm trying to pass an object with variable keys to an ng-click method. In regular javascript you would just do this:
var x = "fork";
var obj = {};
obj[x] = "three points" //{ fork: "three points" }
Normally to send objects via ng-click you would set up an object literal as the argument.
//in controller
$scope.val = "red";
//in view
<button ng-click="click( { item: val} )"></button>
//output is { item: "red" }
But what if you want the key of the argument's object to be bound to a scope property?
//in controller
$scope.key = 29845;
//in view
<button ng-click="click( { {{key}}: 456 } )"></button>
//should output { 29845: 456 }
Trying this results in a syntax error. However, you can use this same syntax in ui.bootstrap typeahead's typeahead-on-select method and it works... I have no idea why though.
<input type="text"
typeahead="i for i in data"
typeahead-on-select="select( { {{i}}: 'something' } )"
class="typeahead" />
http://plnkr.co/edit/EfSvbP8fXBLoZhr8eWG5
How can you bind scope properties to object keys?

Answer 1

You can try something like this :
<button ng-click="temp={};temp[key]=456;click(temp)"></button>
See http://plnkr.co/edit/NfH3xNUXtBROiu9olHVE?p=preview.
Though it will add temp variable in the scope.