In AngularJS, why does an $interval call trigger the $scope.someFunction() to be called again and again?
<p>This is related to <a href="https://stackoverflow.com/questions/35429891/using-angularjs-what-will-get-updated-and-what-will-not">Using AngularJS, what will get updated and what will not?</a></p>

<p>So the function <code>theMagicNumber()</code> is only called every time the model changes. But if the following lines:</p>

<pre><code>    $interval(function() {
        $log.log(JSON.stringify($scope.foo));
    }, 1000);
</code></pre>

<p>is added to the controller, then <code>theMagicNumber()</code> is called again and again.  Is that a normal behavior and why is that?</p>

<p>Example at: <a href="https://jsfiddle.net/507caoxf/1/" rel="nofollow noreferrer">https://jsfiddle.net/507caoxf/1/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module("myapp", [])
.controller("ctrlFoo", function($scope, $interval, $log) {

    console.log("coming into the almighty controller");

    $scope.foo = [1, 3, { abc: { haha: [5,6,7,8,9]}}];

    $interval(function() {
        $log.log(JSON.stringify($scope.foo));
    }, 1000);

    $scope.theMagicNumber = function() {
        $log.log("the majestic function is invoked at ", new Date);
        $log.log(JSON.stringify($scope.foo));
        var n = +($scope.foo[2].abc.haha[3]);
        return n * n;
    }

    $scope.bar = +($scope.foo[2].abc.haha[3]) * 2;

});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;div ng-app="myapp" ng-controller="ctrlFoo"&gt;


    &lt;input type="text" ng-model="foo[2].abc.haha[3]"&gt;

    {{ theMagicNumber() }}

    {{ bar }}


&lt;/div&gt;</code></pre>
</div>
</div>
</p>