Error: the expression 'undefined' used with the directive is not assigned

Question

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

I have data from json so that

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

I use ng-repeat to print all the data, and I want a monotory for field changes.

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

I have a monitorChange directive:

 .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 I try to change the data, I get the error message Error: [$compile:nonassign] Expression 'undefined' used with directive 'monitorChange' is non-assignable!

I print the data in my view with:

 {{changedFlag }} 

What is wrong with the code?

Answer 1

• As you mentioned scope: {caretPosition: '='} in the directive definition, we need to pass caret-position="obj.changedFlag" to the markup.
• Since ng-repeat creates a new area for each element, it is useful to use a Dot note so that changes are reflected in the controller area.

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