Writing to an array and updating the data on the page?

Question

JavaScript

Application link: paramount1987.github.io/angular-charges
code itself: https://github.com/Paramount1987/angular-charges/b...
Problem when editing income amount. With the onblur event, the data is not updated immediately, only with a repeated event (but the value remembers), why is that?. There is not enough knowledge of what and where to dig.
I am writing a simple application for learning angular (and javascript as well).
Amount editing code.

$scope.valueEdit = function(event,index,obj){

    var input = document.createElement('input');
    input.setAttribute('type','number');
    input.setAttribute('class','td-input-item');
    input.setAttribute('data-index',index);
    input.value = obj.value;
    event.currentTarget.appendChild(input);
    input.focus();

  input.onblur = function(){
      $scope.charges[this.getAttribute('data-index')].value = this.value;
      this.parentNode.removeChild(this);
    };

  };

Answer 1

It's much simpler: Angular doesn't know to loop $digest on the onBlur event. Possible solutions: 1. Wrap the change in $scope values ​​in the $scope.$apply() construct. This is the fastest, but not the best way. It would be better to create a directive with the functionality you need, and use the angular directives (ng-click, ng-blur, ....) to bind events. In general, try to use DOM operations as little as possible, and if necessary, move the operations to the link function of the directives