Simpler explicit name radio buttons

helpers-radio-button.js

import RadioView from '../views/radio';

export default Ember.Handlebars.makeViewHelper(RadioView);

templates-application.hbs

<label>
    {{radio-button name='thing' value='one' checked=selection}} One
</label>
<br>
<label>
    {{radio-button name='thing' value='two' checked=selection}} Two
</label>
<br>
<div>Currently selected: {{selection}}</div>

views-radio.js

var RadioView = Ember.View.extend({
  tagName: 'input',
  type: 'radio',
  attributeBindings: ['type', 'htmlChecked:checked', 'value', 'name'],
  htmlChecked: function(){
    return this.get('value') === this.get('checked');
  }.property('value', 'checked'),
  change: function(){
    this.set('checked', this.get('value'));
  }
});

export default RadioView;

I tried this and it works but for some reason my observers only fire once. I set the value and observer like this.

export default Ember.ObjectController.extend({
  selection: "one-way",
  selectionChanged: function() {
    alert(this.get('selection'));
  }.observes('selection')
});

Can you reproduce this?