Why does Angular run controller function twice for each model change? : <p>I have Angular application made of following tiers:</p>

<ul>
<li><code>service()</code> used for computations and data-munging</li>
<li><code>factory()</code> used as common data storage for multiple controllers</li>
<li>few <code>controllers()</code></li>
</ul>

<p>My controller exposes function from factory that, in turn, calls function from service. In HTML, I run controller function and display output to user: <code>{{ controller.function() }}</code>.</p>

<p>I have noticed that when page is loaded, and on every subsequent model change, <code>controller.function()</code> is run <strong>twice</strong>. Why does it happen? How can I avoid unnecessary invocation?</p>

<p>See <a href="https://plnkr.co/edit/O4NbJRAzTjAknuA8O57w?p=preview" rel="nofollow noreferrer">working example</a> - open your browser JS console, click <code>Run</code> and observe that <code>console.log()</code> line is executed two times.</p>

<hr>

<h2>JavaScript</h2>

<pre><code>angular.module('myApp',[])
.service('Worker', [function() {
    this.i = 0;
    this.sample = function(data) {
    console.log(this.i.toString() + " " + Math.random().toString());
    return JSON.stringify(data);
  };
}])
.factory('DataStorage', ['Worker', function(worker) {
    var self = this;
    self.data = [{}, {}];
    self.getData = function() {
      return self.data;
    }
  self.sample = function() {
    return worker.sample(self.data);
  };
  return {
    getData: self.getData,
    sample: self.sample
  };
}])
.controller('MainController', ['DataStorage', function(DataStorage) {
    var self = this;
    self.data = DataStorage.getData();
  self.sample = DataStorage.sample;
}])
.controller('DataSource', [function() {
  var self = this;
  self.data = ["one", "two", "three", "four", "five", "six"];
}])
</code></pre>

<hr>

<h2>HTML</h2>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="myApp"&gt;

  &lt;head&gt;
    &lt;script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;

  &lt;body ng-controller="MainController as main"&gt;
    &lt;div ng-controller="DataSource as datasource"&gt;
      &lt;div ng-repeat="select in main.data"&gt;
        &lt;select ng-model="select.choice" ng-options="value for value in datasource.data"&gt;
          &lt;option value=""&gt;-- Your choice --&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;

    &lt;pre&gt;
      {{ main.sample() }}
    &lt;/pre&gt;
  &lt;/div&gt;
  &lt;/body&gt;

&lt;/html&gt;
</code></pre>

<hr>

<p>Why does this function run multiple times for every single model change and how can I ensure that it runs only once?</p>

<p>I have tried assigning factory function output to controller variable (and use <code>{{ controller.function }}</code> in HTML - note lack of parentheses), but then function is run only once ever. It should run on new data when model is changed.</p>

<p>Similar problems reported on StackOverflow all refer to ng-route module, which I am not using.</p>
