angularjs - $loaded is not working properly when the server data is changed -

i new firebase , angularjs. sales application use both. so, in app using angularjs v1.5.8 + firebase v3.3.0 + angularfire 2.0.2. have sales , users objects in firebase db, , has business logic 1 user can sell multiple products, 1 product can have 1 owner (user).

here users , sales objects in database:

{   "sales" : {     "-kqlb5n6a9rclc5qcwgd" : {       "price" : 8,       "quantity" : {         "count" : 12,         "type" : "porsiyon"       },       "status" : "sale",       "title" : "patlicanli borek",       "user" : "-kq52ojd-lwodiwzfyft"     },     "-kqlcscsq8cidk7drs04" : {       "price" : 12,       "quantity" : {         "count" : 10,         "type" : "porsiyon"       },       "status" : "sale",       "title" : "deneme",       "user" : "-kq5-mzbt6mhyy401ggm"     },     "-kqzxhwov2rc73scjv46" : {       "price" : 12,       "quantity" : {         "count" : 11,         "type" : "porsiyon"       },       "status" : "sale",       "title" : "pacanga",       "user" : "-kq5-mzbt6mhyy401ggm"     },     "-kscbgpartnkunuueuvr" : {       "price" : 15,       "quantity" : {         "count" : 15,         "type" : "porsiyon"       },       "status" : "sale",       "title" : "iskembe",       "user" : "-kq52ojd-lwodiwzfyft"     }   },   "users" : {     "-kq5-mzbt6mhyy401ggm" : {       "address" : "halkali kucukcekmece",       "email" : "burak.kahraman@gmail.com",       "name" : "burak hero",       "nick" : "burak'in mutfagi"     },     "-kq52ojd-lwodiwzfyft" : {       "address" : "izmir kaynaklar",       "email" : "ayse@gmail.com",       "name" : "ayse kahraman",       "nick" : "ayse'nin mutfagi"     }   } } 

what want when app opened, show all sales corresponding user details. (just main page of letgo application) means should implement simple join between sales , users objects. far searched throughout internet , api docs, there no way implement kind of join in single call firebase. (pl correct me if wrong) used below method using $loaded function inside of salesservice implement join.

angular.   module('core.sales')   .service('salesservice', function ($firebasearray, $firebaseobject, usersservice) { this.getallsalesjoin = function () {       var sales;       var refsales = firebase.database().ref('sales');       sales = $firebaseobject(refsales);       sales.$loaded()         .then(function () {           angular.foreach(sales, function (sale) {             var saleuser = usersservice.getuserdetail(sale.user);             saleuser.$loaded()               .then(function () {                 sale.user = saleuser;               });           });         });       return sales;     };  }); 

as see fetching sales, after finishes, looping each sale , set related user detail calling usersservice shown below

angular.   module('core.users')   .service('usersservice', function ($firebasearray,$firebaseobject) { this.getuserdetail = function (userid) {       var user;       var refuser = firebase.database().ref('users/'+userid);       user = $firebaseobject(refuser);       return user;     };   }); 

so far good, when call salesservice.getallsalesjoin function within controller , print json object using <pre>{{$ctrl.allsales | json}}</pre>, works wanted, below controller code , printed json object in template.

angular.   module('salelist').   component('salelist', {     templateurl: 'mcts/sale-list/sale-list-template.html',     controller: ['salesservice','usersservice', function salelistcontroller(salesservice,usersservice,$scope) {            this.allsales = salesservice.getallsalesjoin();    }]   }); 

template shows merged objects

{   "$id": "sales",   "$priority": null,   "-kqlb5n6a9rclc5qcwgd": {     "price": 8,     "quantity": {       "count": 12,       "type": "porsiyon"     },     "status": "sale",     "title": "patlicanli borek",     "user": {       "$id": "-kq52ojd-lwodiwzfyft",       "$priority": null,       "address": "izmir kaynaklar",       "email": "ayse@gmail.com",       "name": "ayse kahraman",       "nick": "ayse'nin mutfagi"     }   },   "-kqlcscsq8cidk7drs04": {     "price": 12,     "quantity": {       "count": 10,       "type": "porsiyon"     },     "status": "sale",     "title": "deneme",     "user": {       "$id": "-kq5-mzbt6mhyy401ggm",       "$priority": null,       "address": "halkali kucukcekmece",       "email": "burak.kahraman@gmail.com",       "name": "burak hero",       "nick": "burak'in mutfagi"     }   }, ..... 

but problem is, when server data changed (new sale entered or old 1 deleted), angular automatically understands change applies change view without implementing or calling joined function, prints only sales object not merged 1 users. below showing object after server data changed.

{   "$id": "sales",   "$priority": null,   "-kqlb5n6a9rclc5qcwgd": {     "price": 8,     "quantity": {       "count": 12,       "type": "porsiyon"     },     "status": "sale",     "title": "patlicanli borek",     "user": "-kq52ojd-lwodiwzfyft"   },   "-kqlcscsq8cidk7drs04": {     "price": 12,     "quantity": {       "count": 10,       "type": "porsiyon"     },     "status": "sale",     "title": "deneme",     "user": "-kq5-mzbt6mhyy401ggm"   }, .... 

i confused why behaves that? way implement join using $loaded wrong? or should use method implement kind of join? looking forward see priceless suggestions , ideas.

$loaded() fires when initial data has loaded. reference documentation (emphasis mine):

returns promise is resolved when initial object data has been downloaded database.

this main reason say: "if you're using $loaded(), you're doing wrong".

you're right needing join data multiple calls. in angularfire can extend $firebasearray perform such operation. great example of how this, see answer kato: joining data between paths based on id using angularfire