AngularJS + TinyMCE: ng-maxlength is not working on <textarea>

Question

I want to limit max text length so it doesn't exceed a column length in a DB. I've put this limitation on backend, and now I want to enforce it on frontend.

I use TinyMCE v4.3.3 with angular-ui-tinymce v0.0.12 plugin and AngularJS v1.4.6.

JS:

var tinymceOpts = {
    toolbar: false,
    menubar: false,
    // do not add <p></p> from the start:
    forced_root_block: ''
}

HTML:

<textarea ui-tinymce="tinymceOpts"
          ng-model="body"
          name="body"
          ng-maxlength="100"
          required>
    {{ body }}
</textarea>
<span ng-show="form.body.$error.maxlength" class="error">
    Reached limit!
</span>

As you can see, I use ng-maxlength attribute here to limit a length of <textarea>.

Expected result: input is validated and error message is displayed only if content length (with tags included) has exceeded a limit (100 characters in this case).

Actual result:

Form input state is set to invalid when the input contains some text (no matter what length).

---

Number of characters (in the right bottom corner) is calculated for testing:

this.getCharCount = function() {
    var tx = editor.getContent({format: 'raw'});
    return tx.length;
};

Answer 1

The problem here is that TinyMCE uses an own <iframe> to edit text contents and writes them back to your <textarea> on special events. No wonder ng-maxlength does not work here.

In order to achieve what you want you will need to check for the editor content itself and disallow entering more characters in case the maxlength is reached.