title: How to return values based on an id array in AngularJS
body: <p>This problem is really hard to replicate because it seems almost random, but here is a basic example of what I am trying to do, I think i'm not doing it the best way in AngularJS which is why I am running into problems.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="test"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Testing&lt;/title&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"&gt;&lt;/script&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-controller="main"&gt;
  
      &lt;pre&gt;numPeopleInProfession('Graphics') {{numPeopleInProfession('Graphics') | json}}&lt;/pre&gt;
      &lt;pre&gt;numPeopleInProfession('Psychology') {{numPeopleInProfession('Psychology') | json}}&lt;/pre&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var app = angular.module('test', []);
  
  app.controller('main', function($scope){
  
      $scope.people = [
          {
              'name':'Jordan',
              'profession':'Graphics'
          },
          {
              'name':'Amber',
              'profession': 'Psychology'
          },
          {
              'name':'Megan',
              'profession': 'Graphics'
          }
      ]
  
      $scope.numPeopleInProfession = function(profession) {
          var numPeople = 0;
          for(var i=0; i&lt;$scope.people.length; i++) {
              if($scope.people[i].profession == profession) {
                  numPeople+=1;
              }
          }
          console.debug(numPeople);
          return numPeople;
      };
  
  });
  </code></pre>
  
  <p>As you can see the data i'm trying to output is not a simple variable, it's a variable that needs to be calculated on the fly (in the real world environment the JSON data is being pulled from a Firebase backend).</p>
  
  <p>The console.debug() logs the correct number of people in each profession, however when I hard refresh the page sometimes the correct number shows up, and sometimes it's 0.</p>
  
  <p>It's really hard to get to the root of the problem because it seems to be random when it shows up as 0 and when it shows the return value of the function.</p>
  
  <p>Is there a better way to do this in AngularJS? I'm really new to Angular &amp; might be approaching this in the wrong way.</p>
  
  <p>I have a feeling it has something to do with the scope / DOM not being fully updated before it fires the function.</p>