Hi Maria,

$scope.model.value doesn't have to just be a string, it can be an object. So $scope.model.value = { key: key, value: value };

I assume you've already got your angular controller setup, so all you really need to do is to listen to the change event on your dropdown and then set that object as your value. In your Razor view you'll be returned some JSON so you can either work with it is a dynamic, deserialize it to an object. (e.g. var propVal = JsonConvert.DeserializeObject<KeyValuePair<string,string>>(content.GetPropertyValue<string>("myVal"));) or setup a property value converter.

Hey David,

your solution sounds logical but I can only get it to work halfway. Here is what I've got:

Dropdown:

<select ng-model="model.value" ng-options="key as value for (key , value) in data" ng-controller="DDMakeController"></select>

Controller:

angular.module("umbraco")
.controller("DDMakeController", function($scope){


    $scope.data = {
        "key1": "val1",
        "key2": "val2",
        "key3": "val3",
    };

    $scope.model.value = { a: $scope.model.value, b: $scope.data[$scope.model.value] }

    console.log($scope.model);

});

Razor:

 var propVal = JsonConvert.DeserializeObject<KeyValuePair<string, string>>(Model.Content.GetPropertyValue<string>("test"));

console.log from controller shows me that I end up with Object that has a value where a: "key1" and b: "val1" (or whichever I choose).

So far so good.

However when I use Model.Content.GetPropertyValue("test") it only contains key1 and your line of code with JsonConvert returns an error:

Newtonsoft.Json.JsonReaderException: Unexpected character encountered while parsing value: U. Path '', line 0, position 0.

And it makes sense if the value contains only "key1"

Any ideas?

Ok. I got it working but now I have another problem, namely how to make sure that backoffice shows the value that was last selected. Here is my code again:

Controller:

   angular.module("umbraco")
    .controller("DDMakeController", function($scope){
    $scope.makes = {
        "key1": "val1",
        "key2": "val2",
        "key3": "val3",
    };

    $scope.saveKeyValue = function () {
        $scope.model.value = { key: $scope.model.value, value: $scope.makes[$scope.model.value] }
        console.log($scope.model.value);
    };
});

Select:

   <select ng-model="model.value" ng-options="key as value for (key , value) in makes" ng-controller="DDMakeController" ng-change="saveKeyValue()"></select>

I tried to use "track by":

<select ng-model="model.value" ng-options="key as value for (key , value) in makes track by model.value.key" ng-controller="DDMakeController" ng-change="saveKeyValue()"></select>

But that stops it from filling in values and I get "Object {key: undefined, value: undefined}" from my console.log. Any idea what to do?

Ok so you've reminded me that ng-options can select an object so perhaps if you do something like this:

$scope.myOptions = [
    { id: "key1", label: "va1A"},
    { id: "key2", label: "va1B"},
];

Then you should be able to structure your ng-options directive to actually select one of those objects as your value. Something like:

<select ng-model="model.value" ng-options="item as item.label for item in myOptions track by item.id" ng-controller="DDMakeController"></select>

Then you should find that $scope.value = { id: "key1", label: "va1A"} (or other option)

is working on a reply...