AngularJs function triggering when a model value change with out using a watch function. Please refer the bellow code. The function $scope.showTab is triggering when the model value $scope.ActiveTab is changing. But i have not called the function $scope.showTab or not write any watch function for the model.
<script>
var app = angular.module("MyApp", []);
app.controller("MyController1", function ($scope, $rootScope) {
$scope.ActiveTab = 'scheme';
$scope.showTab = function (tab) {
var r = $scope.ActiveTab == tab;
return r;
}
$scope.moveNext = function () {
$scope.ActiveTab = 'earning';
};
$scope.moveBack = function () {
$scope.ActiveTab = 'scheme';
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController1">
<div ng-show="showTab('scheme')" style="width: 200px; height: 75px; background-color: aqua;">
One
</div>
<div ng-show="showTab('earning')" style="width: 200px; height: 75px; background-color: rgb(129, 63, 190);">
Two
</div>
<input type="button" value="Back" ng-click="moveBack()" />
<input type="button" value="Next" ng-click="moveNext()" />
</div>
ng-show
creates watchers for you, if you check $scope.$$watchers
you will find 2 watchers created by Angularjs to get the changes on showTab function.