Accessing values of promises in an array
<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>