How to create a <select> element with polymer-dart repeat

I am trying to iterate a list to create a select drop-down box. My code is shown below as a web component

<!DOCTYPE html>
<polymer-element name="epimss-name">
  <template>
    <label for='titleCmbo' id='titleLbl'>Title</label>

    <template repeat="{{title in titleList}}">
      <select id='titleCmbo'>
        <option value='{{title}}'>{{title}}</option>
      </select> 
    </template>

  </template>
  <script type="application/dart">

    import 'package:polymer/polymer.dart';

    @CustomTag( 'epimss-name' )
    class NameElement extends PolymerElement
    {
      final List<String> titleList = toObservable([ '', 'Dr', 'Miss', 'Mr', 'Mrs', 'Prof'  ]);
    }

  </script> </polymer-element>
</body>
</html>

As the code is, it creates a separate combo for each iteration. If I move the tags outside of the nested template, the editor complains.

What is the proper way to do this?

Thanks

Solution

You can use the template attribute on the option tag. It will repeat the option element and loop value for each item in the template collection.

<select id="titleCmbo">
  <option value="{{title}}" template repeat="{{title in titleList}}">
    {{title}}
  </option>
</select>