title: how to wrap text in angularjs and save the position
body: <p>I would like to wrap text with span tag and save the position.
  I know how to do it with JS but i dont know how to do it with angularjs</p>
  
  <p>Here is what i have done:</p>
  
  <p><a href="http://jsfiddle.net/ymeaL06j/1/" rel="nofollow">http://jsfiddle.net/ymeaL06j/1/</a></p>
  
  <p>This function gives me the position of the text in the DIV</p>
  
  <pre><code>function getSelectionPosition() {
    var range = window.getSelection().getRangeAt(0);
    var preSelectionRange = range.cloneRange();
    preSelectionRange.selectNodeContents(document.getElementById("code"));
    preSelectionRange.setEnd(range.startContainer, range.startOffset);
    var start = preSelectionRange.toString().length;
  
    return {
      start: start,
      end: start + range.toString().length
    }
  };
  </code></pre>
  
  <p>I take the start and end positions and insert them as an attribute in the span tag</p>
  
  <p>After this i would like to save all the marked positions and load it later, i have a function that select text and then i can wrap it (i hope that there is a better solution)</p>
  
  <pre><code>function setSelection(savedSel) {
    var charIndex = 0, range = document.createRange();
    range.setStart(document.getElementById("code"), 0);
    range.collapse(true);
    var nodeStack = [containerEl], node, foundStart = false, stop = false;
  
    while (!stop &amp;&amp; (node = nodeStack.pop())) {
        if (node.nodeType == 3) {
            var nextCharIndex = charIndex + node.length;
            if (!foundStart &amp;&amp; savedSel.start &gt;= charIndex &amp;&amp; savedSel.start &lt;= nextCharIndex) {
                range.setStart(node, savedSel.start - charIndex);
                foundStart = true;
            }
            if (foundStart &amp;&amp; savedSel.end &gt;= charIndex &amp;&amp; savedSel.end &lt;= nextCharIndex) {
                range.setEnd(node, savedSel.end - charIndex);
                stop = true;
            }
            charIndex = nextCharIndex;
        } else {
            var i = node.childNodes.length;
            while (i--) {
                nodeStack.push(node.childNodes[i]);
            }
        }
    }
  
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  }
  </code></pre>