In the view: I think you can just use a ng-options attribute in the select tag for this ? eg:

<select ng-model="model.value" ng-options="c.id as c.calendarname for c in calendars"></select>

and you don't then need the option bit, having ng-model set to 'model.value' should bind the selected value of the dropdown to the value of the control. 

I got something similar working here; http://www.tooorangey.co.uk/posts/u-css-class-name-dropdown-property-editor-for-umbraco-7/

the docs for ng-options are here: http://docs.angularjs.org/api/ng.directive:select and you can see the 'comprehensive_expression' for the ng-options setting varies depending on the source, (whether it's an object or an array)

Tryied the ng-options directive, but the option tag doesn't get selected after the page has loaded.

Controller:

angular.module("umbraco").controller("EventCalendar.CalendarEditorController",
        function ($scope, $routeParams, calendarResource, notificationsService, assetsService) {

            $scope.calendars = [];

            //Load all calendar
            calendarResource.getall().then(function (response) {
                $scope.calendars = response.data;
            }, function (response) {
                notificationsService.error("Error", "Could not load calendar");
            });

        });

View:

<div ng-controller="EventCalendar.CalendarEditorController">
    <select ng-model="model.value" id="calendar_picker" class="umb-editor umb-dropdown" ng-selected="c.id == model.value" ng-options="c.id as c.calendarname for c in calendars" required></select>
    <p>{{model.value | json}}</p>
</div>

I am guessing slightly, but I don't think you need the ng-selected="c.id == model.value" bit

if you look at the ng-selected docs, http://docs.angularjs.org/api/ng.directive:ngSelected that's for writing out 'selected' on an option element, and I think just binding the ng-model to model.value and using ng-options, should 'just work'

in mine I have

<div ng-controller="tooorangey.uCssClassNameDropdownController">
       <select ng-model="model.value" ng-options="ccn for ccn in classnames"></select>

but I am binding to an array of string values, so my ng-options syntax is different, maybe this makes it different to yours, but when the page loads it selects in the dropdown the value matching the model.value that is saved in umbraco.

Sadly after hours and hours of try and error i'm at an dead end. Nothing is working.

Doesn't matter how i write the ng-options part and if i'm using ng-selected or not. The right value get's saved but the select isn't at the selected value.

Too sad.

Hi David

I've knocked up a test with a more complex source than the one I got working with uCssClassNameDropdown eg:

Controller:

 angular.module("umbraco").controller("dropdownpropertytestcontroller", function ($scope, $http) {  
$scope.calendars = [ 
{ id: '1', calendarname: 'January' }, 
{ id: '2', calendarname: 'February' }, 
{ id: '3', calendarname: 'March' }, 
{ id: '4', calendarname: 'April' }, 
{ id: '5', calendarname: 'May' } 
]; 
}); 

View:

<div ng-controller="dropdownpropertytestcontroller"> 
        <select ng-model="model.value" ng-options="c.id as c.calendarname for c in calendars"></select>

    <span ng-bind="model.value"></span>

Manifest:

 { propertyEditors: 
[ { alias: "DropdownPropertyTest", name: "Dropdown Property Test", valueType: "JSON", editor: 
{ view: "~/App_Plugins/DropdownPropertyTest/dropdownpropertytesteditor.html" }, 
prevalues: {} } ], parameterEditors:[], 
javascript: [ '~/App_Plugins/DropdownPropertyTest/dropdownpropertytest.controller.js' ], 
css: [] } 

The dropdown works as expected, eg the saved value from the dropdown, causes that option to be selected in the list when the new node is reloaded. I'm wondering whether the datatype for your id in your datasource is an integer? but it's being stored as a string. This stack overflow question explains the angular dropdown binding a bit better: http://stackoverflow.com/questions/13803665/angularjs-value-attribute-for-select

Ok problem solved. The thing i overread was that you use the id's as a string. I'm using them as an int. After parsing them to a string everything works.

So thanks for your help and patience.

ace!! glad you got it working.

I'm facing the same issue. I'm serializing a class using JavaScriptSerializer which produces an Id value without quotes as its an integer. I didn't really want to change it to a string in the class just to get quotes. Is there a way I can get Angular to match the model value and the option value to give me a selected value without having to do modify my class?

Hang on found an alternative to ng-option using ng-repeat:

    <select ng-model="model.value">
        <option 
            ng-selected="{{c.CurrencyID == model.value}}"
            ng-repeat="c in currencies"
            value="{{c.CurrencyID}}">
            {{c.Name}}
        </option>
    </select>

I am new to angularjs , i am trying to set the selected value to a dropdown after a post...(along with other options in the dropdown) but i am not able to...

Can you please tell me how do I retain the selected value in the dropdown to be selected even after a post method or a page refresh?

Can you provide some example how your data and your view is looking?

I have been struggling with this same issue for what feels like an eternity now. I am new to angular and umbraco so go easy on me. Currently I am using Umbraco 7.4.1 and can't figure out how to get the "selected" option to stick on reload/refresh. The value def. gets stored.

I am not sure where to begin troubleshooting it. I have tried everything above with no success.

Background: I am attempting to pull back some JSON values from Brightcove to create a picker in our document type. I have tried it both with and without the $http.get.

Here is my HTML

<div ng-controller="BrightcovePicker">
    <select 
            ng-model="model.value" 
            class="umb-editor umb-dropdown" 
            ng-options="video.HTMLTitle for video in Videos track by video.Id" 
            ng-selected="video.Id == model.value.Id" 
            style="width: 50%;">
    </select>

    {{model.value | json}}
</div>

Controller

angular.module("umbraco").controller("BrightcovePicker", function ($scope, $http)
{
    $http.get('/umbraco/api/brightcoveapi/getvideolist').then(function (res)
    {
        $scope.Videos = res.data;
    });
});

Manifest file:

{
  //you can define multiple editors
  propertyEditors: 
  [
    {
      alias: "BrightcovePicker",
      name: "Brightcove Video Picker",
      editor: 
      {
        valueType: "JSON",
        view: "~/App_Plugins/BrightcovePicker/brightcovepicker.html?cache=7"
      }, 
      prevalues: 
      {
      } 
     } 
   ], 
   parameterEditors:[], 

  //array of files we want to inject into the application on app_start
  javascript: 
  [
    '~/App_Plugins/BrightcovePicker/brightcovepicker.controller.js?cache=7'
  ], 
  css: [] 
} 

example of the JSON returned from the $http.get since you can't call the actual location.

[
   {
      "Id": "4446300691001",
      "Title": "Title 1",
      "HTMLTitle": "Title 1"
   },
   {
      "Id": "3701697790001",
      "Title": "Title 2",
      "HTMLTitle": "Title 2"
   },
   {
      "Id": "4490923872001",
      "Title": "Title 3",
      "HTMLTitle": "Title 3"
   },
   {
      "Id": "3812171264001",
      "Title": "Title 4",
      "HTMLTitle": "Title 4"
   }
]

Help Please!!! :)

I have implemented a select input with a flat JSON array that has no properties (a simple 1 dimensional array of values). This page helped me implement it but I thought I would post my solution to help anyone further:

<div ng-controller="emailtemplate.editorcontroller">
<select name="repeatSelect" id="repeatSelect" ng-model="model.value" ng-options="result as result for result in model.results">
</select></div>

and in my controller I bound my data response as follows:

$http.get(url).then(function (response) {
        $scope.model.results = response.data;
});

is working on a reply...