EmberJS: Propagate DOM attribute changes to the controller

I'm trying to work with Ember and Polymer. In my polymer element, I can apply the data changes to the attribute, but I don't know how to makes the Ember data changed when the attribute value on the polymer element changed. This is what I do so far.

<dom-module id="test-input">
  <template>
    <p id="name-view">{{firstName::change}}</p>
    <input id="name-input" type="text" value="{{firstName::input}}">
  </template>
  <script>
    Polymer({
      is: "test-input",
      properties: {
        firstName: {
          type: String,
          notify: true,
          reflectToAttribute: true
        }
      }
    });
  </script>
</dom-module>

When I change the input value, the p#name-view text is changed, including the attribute value on the DOM.

The ember template:

<test-input first-name="{{myName}}"></test-input>
<p id="ember-name-view">{{myName}}</p>
{{input id="ember-name-input" type="text" value=myName}}

The ember controller:

import Ember from 'ember';

Ember.TextField.reopen({
    attributeBindings : [ 'value' ]
});

export default Ember.Controller.extend({
    myName     : 'John Smith',
});

When the app loaded, both input and p from the both ember and polymer template are having the same value from the controller ("John Smith"). When I try to change the input value from the input#ember-name-input, all value on both ember and polymer elements are changed. But when I change the input value from the input#name-input, only the polymer template that changed, and the ember template is not changed.

I'm trying to find out how to makes when the attribute value of first-name changed, the controller value will changed as well.

Can you help me? Or do you have a better options?

Thank you so much! :)