Solved Make sure to utilize Angular's $timeout function instead of the native setTimeout method
I have a property in my model that is displayed as a checkbox. I also have a $scope.watch function that monitors changes to this property and takes action based on its state.
However, when checking the value, it seems to show the old value.
Here is a sample and instruction: https://jsfiddle.net/L1f37px4/12/ HTML:
<div ng-app="hangarApp" ng-controller="hangarController">
<input type="checkbox" ng-model="showOnlyPremiums" id="showPremId">
<label for="showPremId">ClickMe</label>
<div>{{showOnlyPremiums}}</div>
<textarea readonly="readonly">{{testVar}}</textarea>
<p>
step 1. not checked? yes, false<br>
step 2. click it! and?.. only higher value changed<br>
step 3. surprise! click anywhere on free place. lower value changed too<br>
step 4. clicks more not repeat this. but values are not syncs....<br><br>
w.t.f???
</p>
</div>
JS:
(function() {
'use strict';
var hangarApp = angular.module('hangarApp', []);
// CONTROLLER
hangarApp.controller('hangarController', function($scope, $timeout) {
$scope.showOnlyPremiums = false;
$scope.testVar = $scope.showOnlyPremiums;
$scope.$watchGroup(['showOnlyPremiums'], function() {
// watcherByChanges();
$scope.$broadcast('myCustomEvent', {});
});
$scope.$on('myCustomEvent', function(event, data) {
$timeout(function() {
$scope.testVar = $scope.showOnlyPremiums;
});
});
});
})();
Using AngularJs 1.6
PS: Apologies for any language errors in my English