$scope.componentStatus = syncData("components/-JI_JgHxm0TEUEVjADJn/status");
console.log($scope.componentStatus);

console.log($scope.componentStatus.$value);

components : {
    "-JI_dFtOxE5k1ZFeZu8a" : {
      "experience" : "-JJ8jT0oJA3vYOeBNpq5",
      "name" : "Name of Component",
      "status" : "-JJ8hQcUb0_ip9Hoqcqq",
      "theme" : "-JJ8mD9tEsBw3a3g9Wz6"
    },
}

$scope.componentStatus = syncData("components/-JI_JgHxm0TEUEVjADJn/status");
$scope.componentStatus.$on('loaded', function() {
    console.log($scope.componentStatus.$value);
});

<div>When it arrives, it will appear here: {{componentStatus.$value}}</div>

var data = syncData("components/-JI_JgHxm0TEUEVjADJn/status").then(function() {
    console.log(data.$value);
});