Taking long to load

Question

This is getting very very very annoying now... Im stuck on this for a long time... The problem is it is getting slow on loading.. This is my code i will explain at the botto

Answer 1

Firebase loads the data asynchronously, which is why you have to attach a callback function:

ref.onAuth(function(authData) {
  ref.child("Users Auth Info").child(authData.uid).on("value", function(snapshot) {
    $scope.usernameProfile = snapshot.val().Username;
    $scope.imageProfile = snapshot.val().Image
  })
})

The problem is that by the time your callback is executed, AngularJS is not listening for changes anymore. So your console.log statement probably write out the values fine, the new values are bound to $scope, but AngularJS is simply not updating the views.

This can be fixed, by telling AngularJS that is needs to update the view in its next update cycle:

ref.onAuth(function(authData) {
  ref.child("Users Auth Info").child(authData.uid).on("value", function(snapshot) {
    $timeout(function() {
      $scope.usernameProfile = snapshot.val().Username;
      $scope.imageProfile = snapshot.val().Image
    });
  })
})

Alternatively, you can use AngularFire to accomplish the same.

For a longer explanation and a list of related questions, see Asynchronous access to an array in Firebase

Update

Your minimal code from the Plunkr is:

var ref = new Firebase('https://angularfireauthtut.firebaseio.com/')
  $timeout(function(){
    ref.child('Image').on("value", function(snapshot) {
    console.log(snapshot.val());
    $scope.image = snapshot.val();
  }, function (errorObject) {
    console.log("The read failed: " + errorObject.code);
  })
})

console.log("For some reason this gets logged first?")
console.log($scope.image)

For any next question, make that the only code in your question and we can get somewhere faster.

There are two problems in here, one is visible in the output from console.log(snapshot.val());:

'http://png.clipart.me/graphics/thumbs/151/man-avatar-profile-picture-vector_151265384.jpg'

See those single quotes around there? Those are not supposed to be there, because your HTML now ends up like this:

<img src="'http://png.clipart.me/graphics/thumbs/151/man-avatar-profile-picture-vector_151265384.jpg''" />

The src is surrounded by both double quotes and then single quotes and this means it's not a valid URL anymore.

The proper solution is to store the image without the single quotes. But for now, this will also work:

var imgUrl = snapshot.val();
imgUrl = imgUrl.substring(1, imgUrl.length-1);
$scope.image = imgUrl;

The second problem is that you fail to alert AngularJS of the new image. You've put the $timeout on the wrong level, it needs to be inside the value callback:

ref.child('Image').on("value", function(snapshot) {
  // tell AngularJS that we're going to make changes to $scope
  $timeout(function(){
    var imgUrl = snapshot.val();
    imgUrl = imgUrl.substring(1, imgUrl.length-1);
    console.log(imgUrl);
    $scope.image = imgUrl;
  });
}, function (errorObject) {
  console.log("The read failed: " + errorObject.code);
})

This snippet works and shows your image.

Once you fix the data to not have the single quotes around the Image value anymore, you can get rid of most of this plumbing by using AngularFire:

var ref = new Firebase('https://angularfireauthtut.firebaseio.com/');
$scope.image = $firebaseObject(ref.child('Image'));

I highly recommend that you use that library. But if you don't, read up on $timeout() and AngularFire's digest loop before continuing. Just copying my working snippet without learning about those is guaranteed to lead to an equally frustrating experience soon again.

update for EDIT3

Since your database contains just strings, you'll need to use this in your HTML:

<img ng-src="{{image.$value}}"/>

Updated working plunkr: http://plnkr.co/edit/NlDsxdCqUSboZci6T7ES?p=preview