How do I set returned Firebase data to a $scope variable in AngularJS?

What I am trying to do:

I want to output all of the books in the book node on my home page. What I need is an array of objects that contain all of the books in the book node so that I can loop through them using the ng-repeat directive in AngularJs. In the code below, when I console log the data, I get an object of objects, which caot be used with ng-repeat. Another issue that I am having is when I try to output the $scope.allBooks variable on to the page, nothing appears. Can anyone help me with this?

// Main Controller
firebase.database().ref('books').on('value', function(snapshot) {
    var data = snapshot.val();

    $scope.allBooks = data;
    console.log(data);
});


// Book Node in Firebase
books : {
    id : {
        title: 'The Hunger Games',
        author: 'Suzae'
    },
    id : {
        title: 'Harry Potter and the Order of the Phoenix',
        author: 'J.K.'
    }
}