Firebase AngularFire load object from DOM via lookup

Question

I am iterating and displaying a list of Book Rentals as objects in Firebase. Each rental needs to link to a book and show some details about it. So each Rental item has the id of the Book object. Here is my HTML:

<li ng-repeat="rental in rentals">
   {{rental.dueDate}} - {{lookup(rental.bookId).name}}
</li>

and I have the following method for lookup in the controller:

$scope.lookup= function(bookId){
   var booksRef = firebase.database().ref().child("books");
   var book = $firebaseObject(booksRef.child(bookId));
   return book;
}

Debugging the code it seems like the lookup method is called properly and returns the correct book.

Unfortunately, when loading the page I get an exception:

10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: []

https://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5D

Any ideas?

p.s. I am happy to use a different approach if it's the more "correct" one

checklist checklist · Accepted Answer · 2016-08-10T05:48:48

I solved this quite easily:

Create a service bookService and inject it into the controller. Then, from the html call it as follows:

{{ bookService.$getRecord(rental.bookId).name }}

Firebase AngularFire load object from DOM via lookup

1 Answers