title: AngularJS - add http prefix to url input field
body: <p>Our app is being ported from jQuery to AngularJS with bootstrap (angular-ui bootstrap).</p>
  
  <p>One handy feature that was covered by the following excellent post was to add "http://" prefix to a URL field if it did not already have a prefix: <a href="http://www.robsearles.com/2010/05/jquery-validate-url-adding-http/" rel="noreferrer">http://www.robsearles.com/2010/05/jquery-validate-url-adding-http/</a></p>
  
  <p>I am trying to achieve the same in AngularJS via a directive, but cannot get the directive to alter the value of the ng-model as it is being typed.</p>
  
  <p>I've started simple by trying to get a fiddle to add a "http://" prefix on EVERY change for now (I can add the logic later to only add it when needed). <a href="http://jsfiddle.net/LDeXb/9/" rel="noreferrer">http://jsfiddle.net/LDeXb/9/</a></p>
  
  <pre><code>app.directive('httpPrefix', function() {
      return {
          restrict: 'E',
          scope: {
              ngModel: '='
          },
          link: function(scope, element, attrs, controller) {
              element.bind('change', function() {
                  scope.$apply(function() {
                     scope.ngModel = 'http://' + scope.ngModel;
                  });
              });
          }
      };
  });
  </code></pre>
  
  <p>Can anyone please help me to get this to write back to the ngModel. Also, the field I need to apply this new directive to already has a directive on it with isolate scope so I'm assuming I can't have another one with isolate scope - if this is so can I achieve it without isolate scope?</p>