title: Updating a variable in Angular $interval causes other functions to run
body: <p>I've tried to simplify this problem as much as possible so ignore how pointless this example is :)</p>
  
  <p>I have a directive that is displaying a timer. Every 500ms it increments the counter.</p>
  
  <p>JS</p>
  
  <pre><code>.directive('testTimer', function($interval) {
      return {
          link: function(scope, el, attrs) {
              var count;
              scope.counter = 0;
              count = $interval(tick, 500);
  
              function tick() {
                  scope.counter++;
              }
          }
      }
  })
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;test-timer&gt;{{counter}}&lt;/test-timer&gt;
  </code></pre>
  
  <p>Every time tick() runs, functions in my controller also run</p>
  
  <pre><code>.controller('testController', function($scope) {
      $scope.array = [
          1,2,3
      ]
  
      $scope.getNumber = function(num) {
          console.log('Why does this run every time tick runs?')
          return num;
      }
  
  })
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-controller="testController"&gt;
  &lt;div ng-repeat="number in array"&gt;
      {{getNumber(number)}}
  &lt;/div&gt;
  
  
  &lt;test-timer&gt;{{counter}}&lt;/test-timer&gt;
  </code></pre>
  
  <p></p>
  
  <p>I've tried using <a href="https://docs.angularjs.org/api/ng/service/$interval" rel="nofollow" title="Angular Docs for $interval">invokeApply = false</a> in my $interval but then the counter doesn't update in the DOM. How do I prevent my directive from running other functions in my controller over and over but still have it update the counter in the view?</p>
  
  <p>Here is a JS fiddle showing the issue (look at the console logs)
  <a href="https://jsfiddle.net/marmite/nf4c18tx/" rel="nofollow">https://jsfiddle.net/marmite/nf4c18tx/</a></p>