title: AngularJS directive: Expression 'undefined' used with directive ... is non-assignable
body: <p>I'm a 2 week old Angular noob, and I've been attempting my first ever directive for over a day now. :P  I've read <a href="http://docs.angularjs.org/guide/directive">this</a> and <a href="http://umur.io/angularjs-directives-using-isolated-scope-with-attributes/">this</a>, which seem good directives introductions and a bunch of Stackoverflow answers, but I can't get this working.</p>
  
  <pre><code>&lt;div ng-app="App" ng-controller="Main"&gt;
    &lt;textarea caret caret-position="uiState.caretPosition"&gt;&lt;/textarea&gt;
    {{uiState.caretPosition}}
  &lt;/div&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>angular.module('App', [])
    .controller('Main', ['$scope', function ($scope) {
      $scope.uiState = {};
      $scope.uiState.caretPosition = 0;
    }])
  
  
    .directive('caret', function() {
      return {
        restrict: 'A',
        scope: {caretPosition: '='},
        link: function(scope, element, attrs) {
          var $el = angular.element(element);
          $el.on('keyup', function() {
            scope.caretPosition = $el.caret();
          });
        }
      };
    }); 
  </code></pre>
  
  <p>Fiddle is <a href="http://jsfiddle.net/dJty6/5/">here</a>.  I'm basically trying to get the caret position within a textbox.  I'm using this <a href="https://github.com/acdvorak/jquery.caret">jQuery plugin</a> in the fiddle (source of the .caret() method, which should just return a number).</p>
  
  <p>My questions are </p>
  
  <ol>
  <li>Do I even need a directive here?  <a href="http://www.bennadel.com/blog/2476-My-Approach-To-Building-AngularJS-Directives-That-Bind-To-JavaScript-Events.htm">Ben Nadel says</a> the best directives are the ones you don't have to write (amen to that!)</li>
  <li>If yes, is this the right way to go about the directive?  Ie isolated scope with two-way bound variable?  </li>
  <li>If yes, when I run this code locally, I keep getting the error <code>Expression 'undefined' used with directive 'caret' is non-assignable!</code>.  I've read <a href="http://code.angularjs.org/1.2.14/docs/error/%24compile/nonassign">the doc</a> and as far as I can tell I've followed instructions for how to fix to no avail.</li>
  <li>BONUS: Why in jsfiddle do I get no such error. The fiddle just fails silently. What's with that?</li>
  </ol>
  
  <p>Thanks! </p>