Creating a directive?

Question

JavaScript

Application: paramount1987.github.io/angular-charges
code: https://github.com/Paramount1987/angular-charges/b...
Created a directive, hung a "change" event - works strange ('delayed') - updates data is not immediately for some reason. I don't understand what's wrong.

app.directive('editInput',function($filter){
  return {
    restrict: 'E',
    replace: true,
    template: function(elem,attr){
      return	'<input type="number" class="td-input-item transparent"  ng-model="charge.value" />';
    },
    link: function(scope,element,attrs){
        element.bind('change',function(event){
           // PieChart.segments[$filter('searchChartId')(PieChart.segments, +attrs.index)].value = element.value;
           // PieChart.update();
           scope.compoteTotalSum();
           scope.compoteTotalCost();

        });
        element.bind('blur',function(){
          element.addClass('transparent');
        });
        element.bind('focus',function(){
          element.removeClass("transparent");
        });
    }
  };
});

thanks for the help

Answer 1

Angular is not aware that some event has occurred.
You need to tell him about it.
For example, using $scope.$apply().
To avoid this, you can use the angular js directives for events:
ng-blur, ng-change, ng-focus и т.д.