Why is ng-blur not working?

Question

Angular

<div class="compliteinfo">
  <div ng-repeat="field in $ctrl.fields">
  
    <div class="input-field col s12" ng-if=" field.type === 'textarea' ">
      <textarea id="field-{{field.id}}" class="materialize-textarea">
        
      </textarea>
      <label for="field-{{field.id}}">{{ field.title }}</label>
    </div>

    <div class="input-field col s12" ng-if=" field.type === 'textfield' " >
     	<input type="text"  ng-blur="$ctrl.saveData">
     	<label for="field-{{field.id}}">{{ field.title }}</label>
    </div>

  </div>
</div>

Controller

export default ($scope, $element, $attrs) => { 

  let entity = $scope.$ctrl.data;
  let { executeEvents } = $Registry;

  let processStepId = entity.processstepid;
  let entityid = entity.entityId;
  let idInPool = entity.idInPool;

  executeEvents.requestWidgets({
    'name': 'none', 
    'sendObject': {'entityGet': [processStepId, entityid, idInPool]},
    'mycallback': function(answer){

    	let data = answer.data;
    	console.log(data)
    	$scope.$ctrl.fields = data.fields; // сюда занесли свои элементы и они выводятся

    }
  });

        $scope.$ctrl.saveData = function() {alert('так тоже не работает');}

  $scope.saveData = function(){
    console.log("saveData")
    alert(1)
  }

}

I get inputs and text fields if the types match in ng-repeat, but for some reason the simplest ng-blur does not work, and I need to somehow set an event for this field, what should I do?

Answer 1

Note: As the blur event is executed synchronously also during DOM manipulations (eg removing a focussed input), AngularJS executes the expression using scope.$evalAsync if the event is fired during an $apply to ensure a consistent state.

All expressions are evaluated in context $scope. Accordingly, Angular tries to call $scope.alert(), not window.alert.