pecata pecata - 1 year ago 138
AngularJS Question

Firebase snapshot.val() not binding to $scope

I'm using FireBase and trying to do some queries, the results are logging in but are not visible in the HTML


var shopRef = firebaseDataService.intro;

$scope.shops = [];

var taskRef = shopRef.orderByChild("cat").equalTo("Accomodation");

taskRef.on("value", function(snapshot) {
var snapData = snapshot.val();


When I use
, I manage to get the data updated to shops, but it's still not passing anything to my directive .

<search-card shops="shops"> </search-card>
<p> Shops are {{shops}}</p>

I got it working somehow with $firebaseArray

$scope.shops = $firebaseArray(taskRef);

but I`d still like to know what I'm doing wrong and why it's not working with the snapshot.

Answer Source

From the angularfire docs:

// read data from the database into a local scope variable
ref.on("value", function(snapshot) {

    // Since this event will occur outside Angular's $apply scope, we need to notify Angular
    // each time there is an update. This can be done using $scope.$apply or $timeout. We
    // prefer to use $timeout as it a) does not throw errors and b) ensures all levels of the
    // scope hierarchy are refreshed (necessary for some directives to see the changes)
    $timeout(function() {
      $ = snapshot.val();

It seems that using $scope.apply() will not refresh the entire hierarchy (and hence the directive). Try using $timeout as prescribed instead

That being said, I think you should go with the $firebaseArray() option as that strikes me as the most "angular" solution

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download