title: How can I dynamically set the `selected` attribute on an `<option>` tag?
body: <p>The Ember <a href="https://guides.emberjs.com/v2.10.0/templates/binding-element-attributes/" rel="nofollow noreferrer">guide on binding data attributes</a> says that "If you use data binding with a Boolean value, it will add or remove the specified attribute." I'm trying to use this feature to dynamically set the <code>selected</code> attributes on <code>&lt;option&gt;</code>s. I'm finding that I can dynamically set the <code>disabled</code> attribute, but the <code>selected</code> attribute is always omitted, no whether the boolean is true or false.</p>
  
  <p>Given this handlebars template:</p>
  
  <pre><code>&lt;option disabled={{false}} selected={{false}}&gt;One&lt;/option&gt;
  &lt;option disabled={{true}} selected={{true}}&gt;Two&lt;/option&gt;
  </code></pre>
  
  <p>I get the following HTML:</p>
  
  <pre><code>&lt;option&gt;One&lt;/option&gt;
  &lt;option disabled&gt;Two&lt;/option&gt;
  </code></pre>
  
  <p>Why doesn't <code>selected={{true}}</code> produce a <code>selected</code> attribute in the rendered output?</p>
  
  <hr>
  
  <p>To give a bit more context, I'm following this article on <a href="https://balinterdi.com/blog/how-to-do-a-select-dropdown-in-ember-20/" rel="nofollow noreferrer">How to do a select in Ember 2.0</a>. Using the method described in that article, I can successfully update the data in the controller when the select <code>onchange</code> event fires, but the DOM doesn't update to reflect the change.</p>
  
  <p>I've put together <a href="https://ember-twiddle.com/579092c9273166e209ab05efaad3c453?openFiles=templates.application.hbs%2C" rel="nofollow noreferrer">this ember-twiddle</a>, which includes two <code>select</code> elements. One uses <code>select={{bool}}</code>, which doesn't work the way I want it to. The other uses a long-hand <code>{{#if bool}}...{{else}}...{{/if}}</code>, which does work but looks terrible.</p>