How to save Ace editor's content in Ember.js

I made an Ember.js component based on Ace Editor.

This component's is called from a mytemplate.hbs template like this:

{{ace-editor value=model.my_string_field}}

The template for the component itself being ace-editor.hbs:

<div id="ace-editor">{{value}}</div>

And the component's controller ace-editor.js:

import Ember from 'ember';

export default Ember.Component.extend({
    setAceEditor: function(){
        // usual ace-editor setup stuff
        this.editor = ace.edit('ace-editor');
    },

    didRender: function(){
        this.setAceEditor();
    },

    actions: {
        save: function(){
            this.sendAction('save')
        },
        submit: function(){
            this.sendAction('submit')
        }
    }
});

In mytemplate.hbs, the component is wrapped into a form with a submit button. If I put a simple textArea in place of this component, everything works fine and the value is saved on submit.

However, if I use this component, the value of model.my_string_field is correctly displayed and editable in the Ace editor, but no change gets saved on submit.

I noticed that the textArea created by Ace editor doesn't have an ember id so I must be missing something on how to bind this text area to the model.