Problems with promise retrieving data AngularFire

Question

Looping through an array in my controller using angularjs and angularfire:

angular.forEach($scope.precourse, function(value, key){
   console.log(value);
});

Results in:

Object {$id: "-JUxrRDDip9wCwEx1t6j", $bind: function, $add: function, $save: function, $set: function…}

Object {$id: "-JUxrRDHo6Ph5_5_yUNF", $bind: function, $add: function, $save: function, $set: function…}

Object {$id: "-JUxrRDIGdTuhZkQQ73a", $bind: function, $add: function, $save: function, $set: function…}

Open one object I can see the different properties:

Object {$id: "-JUxrRDIGdTuhZkQQ73a", $bind: function, $add: function, $save: function, 
$set: function…}
$$hashKey: "00P"
$add: function (item) {
$auth: function (token) {
$bind: function (scope, name, defaultFn) {
$child: function (key) {
$getIndex: function () {
$getRef: function () {
$id: "-JUxrRDIGdTuhZkQQ73a"
$off: function (type, callback) {
$on: function (type, callback) {
$remove: function (key) {
$save: function (key) {
$set: function (newValue) {
$transaction: function (updateFn, applyLocally) {
$update: function (newValue) {
pairs: Object         //The Objects I'm intrested in
responsible: Object   //The Objects I'm intrested in
__proto__: Object

so let's print them out!

console.log(value.pairs);
console.log(value.responsible);

Result

undefined schedule.js:38
-JUrw5QLvIaBaICuKdmC schedule.js:39
undefined schedule.js:38
-JUsWS58wX4Y_zEf7FqG schedule.js:39
undefined schedule.js:38
-JU_6xy9_JDkgrE1mPSb 

And if I use the $child() property

console.log(value.$child('pairs'));
console.log(value.$child('responsible'));

Object {$id: "pairs", $bind: function, $add: function, $save: function, $set: function…}
Object {$id: "responsible", $bind: function, $add: function, $save: function, $set: function…}
Object {$id: "pairs", $bind: function, $add: function, $save: function, $set: function…}
Object {$id: "responsible", $bind: function, $add: function, $save: function, $set: function…}
Object {$id: "pairs", $bind: function, $add: function, $save: function, $set: function…}
Object {$id: "responsible", $bind: function, $add: function, $save: function, $set: function…}

Why is this? I'm just looking for the actual values of the object, how do I get them? I want to use value.pairs to retrieve pairs but that won't work.

---

EDIT: Added $on('loaded', function())

Code now looks:

angular.forEach($scope.precourses, function(value, key){
            value.$on('loaded', function(loadedValue) {
                console.log(loadedValue);
                console.log(loadedValue.pair);
            });
        }); 

Gives output:

Object {responsible: "-JU_6xy9_JDkgrE1mPSb"} schedule.js:40
undefined schedule.js:41
Object {responsible: "-JUrw5QLvIaBaICuKdmC"} schedule.js:40
undefined schedule.js:41
Object {responsible: "-JUsYm9UtONz0NzNTqbT"} schedule.js:40
undefined schedule.js:41

Press button to repeat forEach-loop again:

(after short delay)
Object {pairs: Object, responsible: "-JU_6xy9_JDkgrE1mPSb"} schedule.js:40
Object {-JUYhpPWOXqSpDNph5lo: "-JUYhpPWOXqSpDNph5lo", -JU_6xy9_JDkgrE1mPSb: "-JU_6xy9_JDkgrE1mPSb", -JUrw5QLvIaBaICuKdmC: "-JUrw5QLvIaBaICuKdmC"} schedule.js:41
Object {pairs: Object, responsible: "-JUsWS58wX4Y_zEf7FqG"} schedule.js:40
Object {-JUsWEf-v5XxIcLJSFgz: "-JUsWEf-v5XxIcLJSFgz", -JUsWS58wX4Y_zEf7FqG: "-JUsWS58wX4Y_zEf7FqG", -JUsYm9UtONz0NzNTqbT: "-JUsYm9UtONz0NzNTqbT"} schedule.js:41
Object {pairs: Object, responsible: "-JUrvf-rxHZPc4kF-IBb"} schedule.js:40
Object {-JUZSc-QEO0U0rf7hLV4: "-JUZSc-QEO0U0rf7hLV4", -JUdf8Z-uxlc0_sg-ZzB: "-JUdf8Z-uxlc0_sg-ZzB", -JUrvf-rxHZPc4kF-IBb: "-JUrvf-rxHZPc4kF-IBb"} schedule.js:41

EDIT #2 Ok I think I found the problem. It's in the service file where the schedule is created:

Inside /service/schedule.js

angular.forEach(preCourse, function (value, key){
        scheds.$child(schedId).$child('courses').$child('precourses').$add({
          responsible: value
        }).then(function (ref) {
          console.log('Inside Precourse');
scheds.$child(schedId).$child('courses').$child('precourses').$child(ref.name()).$child('pairs').$child(mainCourse[key]).$set(mainCourse[key]);
              scheds.$child(schedId).$child('courses').$child('precourses').$child(ref.name()).$child('pairs').$child(afterCourse[key]).$set(afterCourse[key]);
        });
      });

In my Controller I now create a schedule and log result of precourse:

$scope.schedule = Schedule.scheduleEvent($scope.eve);
$scope.schedule.$on('loaded', function() {
            $scope.precourses = $scope.schedule.courses.precourses;
            console.log($scope.precourses);     
                });

Which results in:

Object {-JUyS4KEV3ljmNvmb8kL: Object, -JUyS4KHH9dM5qwhr_uX: Object, JUyS4KJOjjh5DGu3LSk: Object}
-JUyS4KEV3ljmNvmb8kL: Object
    responsible: "-JUsWS58wX4Y_zEf7FqG"
    __proto__: Object
-JUyS4KHH9dM5qwhr_uX: Object
-JUyS4KJOjjh5DGu3LSk: Object
__proto__: Object

Inside Precourse 

Any idea of what's wrong with my promises? Possible conflict between .then (service) and $on('loaded') (controller)

Answer 1

You're probably logging console.log(value.pairs); before the data loads from firebase. If you upgrade to v0.8 then you can use $loaded() to wait for the data to load. With the version you are currently using you can use $on("loaded")

e.g.

value.$on("loaded", function(loadedValue) {
    console.log(loadedValue.pairs);
}