Angular ng-click fires twice or more time inside a form

Question

I have a form in angular with two dynamic add new fields. There are fired with an ng-click directive inside a div button and handled (of course) for an ng-repeat. The problem isn't that they don't works, the problem is that they are executed three times when you click in the button "add new".

I'd checked some basic things:

• Angular are called once are not more times.
• The ghostmode of browsersync is disabled.

And there are not problems. The problem is (i think) in the default behavior of forms in angular... any ng-click execute the "submit"... let me show you the code:

This is my controller code to add new fields:

        this.cancelations = [
            { 
                namePayload: "product.cancelations.name",
                descriptionPayload: "product.cancelations.description",
                inputName: "inputname-1",
                inputDesc: "inputdesc-1"
            }
        ];

        this.dateforms = [
            {
                daysFormName  : "days_1",
                daysModel     : "product.ranges.days_1",
                fromFormHrs   : "fromHrs_1",
                fromModelHrs  : "product.ranges.fromHrs_1",
                fromFormMins  : "fromMins_1",
                fromModelMins : "product.ranges.fromMins_1",
                toFormHrs     : "toHrs_1",
                toModelHrs    : "product.ranges.toHrs_1",
                toFormMins    : "toMins_1",
                toModelMins   : "product.ranges.toMins_1"
            }
        ];

        this.addDateform = () => {
            let next = this.dateforms.length;

            this.dateforms.push({
                daysFormName  : `days_${next + 1}`,
                daysModel     : `product.ranges.days_${next + 1}`,
                fromFormHrs   : `fromHrs_${next + 1}`,
                fromModelHrs  : `product.ranges.fromHrs_${next + 1}`,
                fromFormMins  : `fromMins_${next + 1}`,
                fromModelMins : `product.ranges.fromMins_${next + 1}`,
                toFormHrs     : `toHrs_${next + 1}`,
                toModelHrs    : `product.ranges.toHrs_${next + 1}`,
                toFormMins    : `toMins_${next + 1}`,
                toModelMins   : `product.ranges.toMins_${next + 1}`
            });

            $scope.$apply();
        };

        this.addPolitic = () => {
            let next = this.cancelations.length;

            this.cancelations.push({ 
                namePayload: `product.cancelationspols.name_${next + 1}`,
                descriptionPayload: `product.cancelationspols.description_${next + 1}`,
                inputName: `inputname-${next + 1}`,
                inputDesc: `inputdesc-${next + 1}`
            });

            $scope.$apply();
        };

The $scope.$apply(); is for the ng-repeat, to use the bindings in the ng-model, and here are the markup (in jade, for sake of simplicity) in a public snippet: GITLAB SNIPPET.

And a screen of the errors:

3 times fired the same error when click in any "add new" button...

Any ideas? ... Thanks in advance.

EDIT:

The safeApply cleans the problem of $apply already in progress but the base issue still remains. I was using $apply to make work my ng-repeat bindings, because this:

.col.s12(ng-repeat="cancelation in product.cancelations")

and this:

input(type="text" name="cancelation.inputName" ng-model="cancelation.namePayload" required)

The idea is simple: cancelation.namePayload need to be: product.cancelations.description.

For some reason, the scope are not applied.

Answer 1

1) You need to remove $scope.$apply(); from your functions if they are in the controller already and don't preform any async operations outside angular. In your case seems that they don't - they're just adding static items into that arrays.

2) Try replace with safeApply:

$scope.safeApply = function(fn) {
  var phase = this.$root.$$phase;
  if(phase == '$apply' || phase == '$digest') {
    if(fn && (typeof(fn) === 'function')) {
      fn();
    }
  } else {
    this.$apply(fn);
  }
};