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>

CodePudding user response：

ng-showcreates watchers for you, if you check $scope.$$watchersyou will find 2 watchers created by Angularjs to get the changes on showTab function.