title: Accessing values of promises in an array
body: <p>I'm trying to create an array from http requests that holds a name property and two promises: one as an array and the other as an object. I'm able to get the info I need using this approach but I'm not able to access it to display it in the scope of the html. For instance, when I log out the array, "people" I get an array of objects (looking like: [Object, Object, Object]) and I have to expand a bunch of things to see the actual values of each object so that "person.skills" would really have to be "person.skills.$$state.value". Also, on the page, {{person.name}} will show up but the other two are just empty objects that look like this: {}. So how can I access the values of the promises so that I can just use {{person.skills}} to show the array?</p>
  
  <p><strong>js</strong></p>
  
  <pre><code>var getPeople = function() {
              var named = $q.defer();
              $http.get('/getnames').success(function (response) {
                  named.resolve(response);
              });
              return named.promise;
          };
  
  
          getPeople().then(function(namesRes) {
              var people = [];
              names = namesRes;
              names.forEach(function(index){
                  var name = index;
                  var count = $q.defer();
                  var skills = $q.defer();
                  var urls = '/getskillsbyname/' + name;
                  var urlc = '/getcountbyname/' + name;
                  $http.get(urls).success(function (response) {
                      skills.resolve(response);
                  });
                  $http.get(urlc).success(function (response) {
                      count.resolve(response);
                  });
                  people.push({name:name, skills:skills.promise, count:count.promise});
              });
              return people;
          }).then(function(people) {
              console.log(people);
              $scope.people = people;
          });
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div ng-repeat="person in people"&gt;
                  &lt;p&gt;{{person.name}}&lt;/p&gt;
                  &lt;p&gt;{{person.skills}}&lt;/p&gt;
                  &lt;p&gt;{{person.count}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>