contenteditable with restrictInput directive - caret moves to beginning on $render

[Maxwell Bates]

Hey - I've put together a plunker to illustrate what I'm talking about:

http://plnkr.co/edit/0EeZpyKzvs00jzIw7fVY?p=preview

I have two directives - one for elements with contenteditable, and one restrictInput to limit to certain letters (in this case, acgt). I don't want to use ngPattern as I don't want the model to be undefined.

Each work individually. However, when both directives are applied, and input that is not allowed is entered, the caret moves to the beginning of the element. 

In the plunkr you will see:

1) input with restrictInput

2) pre with contenteditable

3) pre with contenteditable and restrictInput

Typing an invalid character in each will: 

1) $setViewValue not called - no UI flicker. Invalid characters in middle of string move caret to end.

2) will be entered (no restrictInput directive)

3) Will show and then be removed, and caret moved to the beginning.

My understanding the flow in case (3) is something like this: 

invalid letter -> keyup event -> $setViewValue of contenteditable -> goes through $parsers (to which restrictInput has already been added) -> new $modelValue -> $render or something... (?)

I don't want to use jQuery or anything to move the cursor to the end if I don't have to. Is there a way to make the restrictInput directive work before any changes are captured by the contenteditable directive? Higher priority directive didn't do it, presumably because I'm pushing to the $parsers array? 

Any help appreciated! Thanks