title: Word Wrapping using ng-bind-html
body: <p>I am using AngularJS to build a personal note management application. During so, I ran into a few problems where I get to choose my bug: Whether I should have an application that can't word wrap or one that can't sense the return key.</p>
  
  <p>At first, my app wouldn't sense the return key or extra spaces, so, in my note directive, I replaced:
      <code>&lt;p&gt;{{note.body}}&lt;/p&gt;</code>
  with:
      <code>&lt;p ng-bind-html="note.body | format"&gt;&lt;/p&gt;</code></p>
  
  <p><br/>
  While it fixed the issue with the enter key, not it wouldn't word wrap:</p>
  
  <p><a href="https://i.stack.imgur.com/NLV66.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NLV66.png" alt="App with ng-bind-html"></a></p>
  
  <p>Using ng-bind-html, automatic word wrapping fails - which would be horrible for my app, since I want it to be extremely flexible when it comes to resizing.</p>
  
  <p>How to I fix this error?</p>
  
  <p>Here's my format filter:<code>
      angular.module('NoteWrangler')
          .filter('format', function (){
              return function(input) {
                  if(!input) return input;
                      var output = input
                          //replace possible line breaks.
                          .replace(/(\r\n|\r|\n)/g, '&lt;br/&gt;')
                          //replace tabs
                          .replace(/\t/g, '&amp;nbsp;&amp;nbsp;&amp;nbsp;')
                          //replace spaces.
                          .replace(/ /g, '&amp;nbsp;');
                      return output;
              };
          });</code></p>
  
  <p>Note Directive:</p>
  
  <pre><code>```&lt;div class="container note note-full"&gt;
      &lt;h2&gt;{{note.title}}&lt;/h2&gt;
      &lt;p ng-bind-html="note.body | format"&gt;&lt;/p&gt;
      &lt;p class="text-muted date"&gt;Posted on {{note.timestamp | date}}&lt;/p&gt;
  &lt;/div&gt;```
  </code></pre>
  
  <p>If using the  tag would be the only way to solve this, then I'll do it - after I make the background, border, etc. invisible w/ some CSS.</p>