Cursor position is wrong in ace-ui edit box

I am using the angular.js version of ui-ace: https://github.com/angular-ui/ui-ace

The cursor in the edit box is off to the right like 10 characters from the text. When hit enter key it does not break where the cursor is.

I have read that ui-ace only behaves correctly with monospace fonts and found a fix from doing a search.

I set this style to fix the issue:

.ace_editor, .ace_editor div {
        font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    }

This seems to fix the issue when not using any particular theme or mode. But when I set the ui-ace mode: 'html' the cursor position is now off again. I inspected the element in browser and the ui-ace edit box inner containers are using the monospace font.

This is the container in my angular html file: