Dynamically-generated dropdown selection issue

[Chris Rabl]

Hey there! So I'm trying to dynamically generate a paper-dropdown-menu populated from an AJAX data source, which is working great using the code below:

<polymer-element name="my-element">
  <template>

    <core-ajax auto url="/api/items/" response="{{items}}" handleAs="json"></core-ajax>

    <paper-dropdown-menu selected="{{selected}}">

      <template repeat="{{items}}">

        <paper-item name="{{id}}" label="{{name}}"></paper-item>

      </template>

    </paper-dropdown-menu>

  </template>

But if I set the initial selected item to be either the value of the published attribute, or a value that I set in the 'ready' callback, the dropdown menu item does not get selected when the items are loaded:

  <script>
  Polymer({
    publish: {
      selected: null
    },

    ready: function() {
      this.selected = 1; // ends up being reset to null once the dropdown gets populated
    }
  });
  </script>
</polymer-element>

I understand that this is happening because the 'selected' property is being set before the template in the dropdown gets bound, but my question is whether there is a way to either 1) defer the 'selected' property change until after the template is bound or 2) otherwise reliably set an initially selected value for the dropdown menu?

[Chris Rabl]

EDIT: Cross-posted to StackOverflow... http://stackoverflow.com/questions/26635287/dynamically-generated-paper-dropdown-menu-initial-selection-issue