title: function inside ng-repeat called 4 times (AngularJs)
body: <p>The following HTML code populates a ul with 21 phones:</p>
  
  <pre><code>&lt;li ng-repeat="phone in phones" ng-class="{'digestTest': countDigestOccurences(phone) }"&gt;
    &lt;p&gt;{{phone.snippet}}&lt;/p&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p><code>countDigestOccurences</code> is a JavaScript method which uses a dictionary to keep track of how many times <code>countDigestOccurences()</code> is called per phone.</p>
  
  <pre><code>$scope.countDigestOccurences = function(phone){
    var phoneFound = false;     
    $.each($scope.digestOccurencesPerPhone, function(){
        if(this.phone.id == phone.id){
          phoneFound = true;
          this.occurences++;
        }
    });
  
    if(!phoneFound)
    { 
      $scope.digestOccurencesPerPhone.push({
        phone: phone,
        occurences: 1
      });
    }
  }
  </code></pre>
  
  <p>Through this method I can clearly see that countDigestOccurences is called <strong>4 times per phone</strong>. 
  I can not, for the life of me, figure out why it's called 4 times.</p>
  
  <p><a href="https://i.stack.imgur.com/4FL4F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4FL4F.png" alt="enter image description here"></a></p>
  
  <p><strong>Update:</strong></p>
  
  <p>Number of cycles will remain 4 even if the Phone item's HTML is as follows:</p>
  
  <pre><code>    &lt;li ng-repeat="phone in phones "
          class="thumbnail phone-listing" ng-class="{ 'digestTest': countDigestOccurences(phone),  'digestTestAgain': randomMethodDoesNothing() }"&gt;
        &lt;p&gt;{{phone.snippet}}&lt;/p&gt;
      &lt;/li&gt;
  </code></pre>