title: Compiling Element Causes Input Caret Position to Move to End
body: <p>I am having a problem with a directive.  The purpose of the directive is to easily add validation without having to manually add ng-class (among other things) to elements in order to get the error state to show up.  I just simply want to put a "validation" directive on my element and have the appropriate classes (and error messages) be generated when there is an error state.</p>
  
  <p>As far as the validation goes, it is working great, but it causes an odd side effect.  Whenever I am editing a value in an input box that has the validation directive on it, it moves the caret to the end of the text in the input field.  It appears to be the fact that I'm compiling the element (in this case the parent element which contains this element).</p>
  
  <p><a href="http://jsbin.com/xarotaju/4/edit" rel="nofollow">Here is a jsbin</a> showing the problem.  To reproduce, type a value in the field, then put the caret in the middle of the value you just typed and try typing another character.  Notice it moves you to the end of the field.  Notice that if you delete the value, the field label turns red as expected to show a validation error (the field is required).</p>
  
  <p>Here is the directive (from the jsbin): </p>
  
  <pre><code>angular.module('app', [])
  .directive('validation', function($compile) {
    return {
      require: 'ngModel',
      restrict: 'A',
      compile: function(compileElement, attrs) {
        var formName = compileElement[0].form.name;
        compileElement.removeAttr('validation');
        compileElement.parent().attr('ng-class', formName + "['" + attrs.name + "'].$invalid &amp;&amp; " + formName + "['" + attrs.name + "'].$dirty ? 'error' : ''");
  
        return function(scope, element) {
          $compile(element.parent())(scope);
        }
      }
    };
  });
  </code></pre>
  
  <p>And here is the html:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body ng-app="app"&gt;
      &lt;form name="subscribeForm"&gt;
      &lt;label&gt;
        First Name
        &lt;input type="text" 
               id="firstName" 
               name="firstName" 
               ng-model="userInfo.FirstName" 
               required 
               validation/&gt;
      &lt;/label&gt;
      &lt;/form&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>