Angular ng-if + function not work

Question

In this first code when I change the anoini, the gerar() function show the old value.

But, when I remove <div ng-if.... works fine.

do you knows what's wrong ?

Tks

// JavaScript Document
var app = angular.module('dadosHist', []);

app.controller('dadosHistCtrl', function($scope) {
	$scope.mesini = 1; $scope.anoini = 2011;
	$scope.mesfim = 7; $scope.anofim = 2015;
	$scope.log = "";
	$scope.escolherperiodo = true;
	
	$scope.gerar = function() {
  
		this.log = this.anoini;
		meses = ((this.anofim - this.anoini) * 12) + (12 - this.mesini) + this.mesfim;
		qtdLoop = arrEstacoes.length * meses;
		tempoEstimadoMinutos = Math.round((qtdLoop * 20)  / 60 );

        this.log = 'Tempo Estimado: ' + tempoEstimadoMinutos + ' min.' ;
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="dadosHist" ng-controller="dadosHistCtrl">
<input type="checkbox" ng-model="escolherperiodo">Escolher Período<br>
<div ng-if="escolherperiodo">
<input type="text" ng-model="mesini" placeholder="Mes">/<input type="text" ng-model="anoini" placeholder="Ano"><br>
<input type="text" ng-model="mesfim" placeholder="Mes">/<input type="text" ng-model="anofim" placeholder="Ano"><br>
</div>
<button ng-click="gerar()">Gerar</button> <br>

{{log}}

    

</div>

Answer 1

Always use a dot in ng-model ! . In other words use objects not primitives.

ng-if creates a child scope and since you are using primitives in ng-model you are losing 2 way binding with scope from this child scope.

var myModel ={
      mesini : 1,
      anoini : 2011,
      mesfim : 7,
      anofim : 2015
};
$scope.myModel = myModel;

HTML

<input type="text" ng-model="myModel.mesini">

Then in function:

$scope.gerar = function() {

    $scope.log = myModel.anoini;
    var meses = ((myModel.anofim - myModel.anoini)......

     .....
}

Understanding scope nesting in angular is the most important thing to learn when using the framework

Answer 2

You should not assign value to this, but to $scope inside gerar function:

$scope.gerar = function() {

    $scope.log = $scope.anoini;
    meses = (($scope.anofim - $scope.anoini) * 12) + (12 - $scope.mesini) + $scope.mesfim;
    qtdLoop = arrEstacoes.length * meses;
    tempoEstimadoMinutos = Math.round((qtdLoop * 20)  / 60 );

    $scope.log = 'Tempo Estimado: ' + tempoEstimadoMinutos + ' min.' ;
}