Angular model doesn't update with Space or Enter key are pressed

Question

I have the following editable div which binds to the post.text scope variable below - when I add text I can see the div below update with the length of the string but when I press SPACE or the ENTER key it doesn't increment the string length by one even though I have set the ng-trim attribute to false?

Any ideas - I am using Angular 1.3.x

<div contenteditable id="post-textarea" ng-trim="false" ng-model="post.text"></div>
<div ng-bind-html="post.text.length"></div> <!-- displays the length of the string above -->

Answer 1

I found this answer using a simple google search for 'contenteditable space enter':

.content_editable_element {
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

The original post, and this comment can be found on this SO post. If you find it useful please credit them.