Error: Expression 'undefined' used with directive is non-assignable

Question

fiddle here http://jsfiddle.net/prantikv/dJty6/36/

I have data from json like so

$scope.info={
 "company1":"this",
 "company2":"is",
  "company3":"sparta"
}

I am using ng-repeat to print all the data and I want to monotor for changes on the fields.

 <input type="text" ng-repeat="item in info" value="{{item}}" monitor-change>

I have a monitorChange directive like this:

.directive('monitorChange', function() {
  return {
    restrict: 'A',
    scope: {changedFlag: '='},
    link: function(scope, element, attrs) {
      var $el = angular.element(element);
      $el.on('keyup', function() {//bind to element
          scope.$apply( function() {
            scope.changedFlag =true;//on key press value is changed
          });
      });
    }
  };
}); 

When trying to change the data, I receive the error Error: [$compile:nonassign] Expression 'undefined' used with directive 'monitorChange' is non-assignable!

I am printing the data in my view with:

{{changedFlag }}

What is wrong with the code?

Answer 1

1. As you mentioned scope: {caretPosition: '='} in directive definition, we need to pass caret-position="obj.changedFlag" in the markup.
2. As ng-repeat creates a new scope for each item, it is good to use the Dot notation for the changes to reflect in the controller's scope.

Here is the updated fiddle. http://jsfiddle.net/dJty6/38/