Firebase binding not being reflected in Angular view

Question

I am pulling out one value from every object in Firebase, picUrl (the url of a picture) and storing that in a scope array variable, $scope.bricks. How do I make it so $scope.br

Answer 1

After reading Frank's answer, I realized my problem was with my html. I was trying to create a new variable from my synced variable when I didn't need to. I can just reference the synced variable directly.

I should have modified my ng-repeat variable rather than my model. firebaseObj is synced with Firebase, so lets put that on the $scope.

angular.module('noorApp').controller('MainCtrl', function ($scope, $http, $firebase) {
    var sync = $firebase(ref);
    $scope.firebaseObj = sync.$asObject();
});

Now in the DOM, I should just reference firebaseObj:

Or as Frank said, we can just pull the products document from Firebase:

angular.module('noorApp').controller('MainCtrl', function ($scope, $http, $firebase) {
    $scope.bricks = $firebase(ref).products.$asArray();
});

In this case, the html would look like this:

The point is that by referencing synced variable directly, I don't need $loaded() to run!

Thanks Frank.