ng-style background-image url not working for Firebase Storage reference - angularjs

Question

I'm trying to load background images in a div. I tried several options but my page is blank, nothing is displayed. Below are the different styles I tried:
<div ng-style="{'background-image': 'url(' + profilepic + ')'}"></div>
<div ng-style="{'background-image': 'url('{{profilepic}}')'}"></div>
Where, in my controller:
storageRef.child('images/pic.png').getDownloadURL().then(function(url) {
// Get the download URL for 'images/stars.jpg'
// This can be inserted into an <img> tag
// This can also be downloaded directly
$scope.profilepic = url;
}).catch(function(error) {
// Handle any errors
});
There is no error in the console log. I get the actual url.
This works works, te image is properly displayed, but it's not what I'm trying to accomplish:
<div style="{'background-image': 'url('img/pic.png')'}"></div>
I went through similar posts and tried their solutions, but none of them seem to work.

Answer 1

I finally see what was the problem. I have to share this, it may help others. Everything was fine with my HTML below:
<ion-content>
<div ng-style="{'background-image': 'url('+pic+')'}">
<div class="content">
<div class="avatar" ng-style="{'background-image': 'url('+profilepic+')'}"></div>
<h3>{{fname.txt}} {{lname.txt}}</h3>
</div>
</div>
</ion-content>
The issue was within my controller. This is what I had:
auth.onAuthStateChanged(function(user) {
var storage = firebase.storage();
var storageRef = storage.ref();
var storageRefPic = '';
storageRef.child('images/pic.jpg').getDownloadURL().then(function(url) {
storageRefDefltPic = url;
}).catch(function(error) {
// Handle any errors
});
$scope.pic = storageRefDefltPic;
var storageRefProfilePic = '';
storageRef.child('images/profilepic.jpg').getDownloadURL().then(function(url) {
storageRefProfilePic = url;
}).catch(function(error) {
// Handle any errors
});
$scope.profilepic = storageRefProfilePic;
fbRef.child(userID).once('value').then(function(snapshot) {
$scope.fname.txt = snapshot.val().firstName;
$scope.lname.txt = snapshot.val().lastName;
$scope.pic = storageRefProfilePic;
});
});
My variables and code were completely mixed up. In the console, I came to realize that the firebase reference was getting called first, before the storage reference, causing my scope variables to come out empty, consequently the profile images to be blank. So I removed unnecessary variables and moved the storage references within the callback, before the data snapshot, as below:
auth.onAuthStateChanged(function(user) {
fbRef.child(userID).once('value').then(function(snapshot) {
var storage = firebase.storage();
var storageRef = storage.ref();
var storageRefPic = '';
storageRef.child('images/pic.jpg').getDownloadURL().then(function(url) {
$scope.pic = url;
}).catch(function(error) {
// Handle any errors
});
storageRef.child('images/profilepic.jpg').getDownloadURL().then(function(url) {
$scope.profilepic = url;
}).catch(function(error) {
// Handle any errors
});
$scope.fname.txt = snapshot.val().firstName;
$scope.lname.txt = snapshot.val().lastName;
});
});
Now everything is working fine! I thank you all guys for your help! I sure do appreciate you!

Answer 2

If I understood you correct - the problem is solved fairly easy.
You need to set the size for the div or put some content inside as background-image does not count as content.
Which leads to an empty div with height =0;
here is a working Fiddle

Answer 3

It should be:
<div ng-style="{'background-image': 'url({{profilepic}})'}"></div>
In your case you should use this:
<div ng-style="{'background-image': 'url(' + profilepic + ')'}"></div>
Updated JSFiddle