AngularJS directive: Expression 'undefined' used with directive ... is non-assignable

Question

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 this and this, which seem good directives introductions and a bunch of Stackoverflow answers, but I can't get this working.

<div ng-app="App" ng-controller="Main">   <textarea caret caret-position="uiState.caretPosition"></textarea>   {{uiState.caretPosition}} </div> 

and

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();         });       }     };   });  

Fiddle is here. I'm basically trying to get the caret position within a textbox. I'm using this jQuery plugin in the fiddle (source of the .caret() method, which should just return a number).

My questions are

1. Do I even need a directive here? Ben Nadel says the best directives are the ones you don't have to write (amen to that!)
2. If yes, is this the right way to go about the directive? Ie isolated scope with two-way bound variable?
3. If yes, when I run this code locally, I keep getting the error Expression 'undefined' used with directive 'caret' is non-assignable!. I've read the doc and as far as I can tell I've followed instructions for how to fix to no avail.
4. BONUS: Why in jsfiddle do I get no such error. The fiddle just fails silently. What's with that?

Thanks!

Answer 1

My solution was harder to find out here, but easier to implement. I had to change it to the equivalent of;

  scope: {caretPosition: '=?'}, 

(Note that the question mark makes the attribute optional. Prior to 1.5 this apparently wasn't required.)