Angular Fire - Display Issue with Empty Data - angularjs

Question

I am new to Firebase and Angular JS so please excuse any obvious "what the heck are you doing's"...
I have a few pages that are nested:
A) Directory (templates/tab-directory.html)
A.1) Specialty (templates/tab-specialty.html)
A.1.1) Team (templates/tab-team.html)
My tab-specialty.html looks like this:
<ion-view view-title="{{specialty.name}}">
<ion-header-bar class="bar-positive bar-subheader item-input-inset">
<div class="button-bar">
...
</div>
</ion-header-bar>
<ion-content class="has-subheader">
...
</ion-content>
</ion-view>
This doesn't always display the data. I know I am doing something wrong with asynchronous calls or something along those lines because it seems like the data is just not 'ready' for me to display.
The {{specialty.name}} doesn't always display. If I do ionic serve on the specialty page, it will display fine. However, when I start from one level higher and click into that page, it will not.
My app.js has the following states in it:
.state('tab.directory', {
url: '/directory',
views: {
'tab-directory': {
templateUrl: 'templates/tab-directory.html',
controller: 'DirectoryCtrl'
}
}
})
.state('tab.specialty', {
url: '/specialty/:specialtyId',
views: {
'tab-directory': {
templateUrl: 'templates/tab-specialty.html',
controller: 'SpecialtyCtrl'
}
}
})
.state('tab.team', {
url: '/team/:teamId',
views: {
'tab-directory': {
templateUrl: 'templates/tab-team.html',
controller: 'TeamCtrl'
}
}
})
My controllers.js has the following controller for specialty:
...
.controller('SpecialtyCtrl', function($scope, $stateParams, Specialties, Staff, Teams){
var specialtyId = $stateParams.specialtyId;
...
Specialties.$loaded().then(function(array){
var syncArray = array.getById(specialtyId);
if(syncArray.length > 0){
$scope.specialty = syncArray[0];
console.log($scope.specialty);
}
});
Staff.$loaded().then(function(array){
var allArray = array.getBySpecialtyId(specialtyId);
hasConsults = getHasConsults(allArray);
if(hasConsults){
// Default to consults if we have them
$scope.isConsultsActive = true;
$scope.staffList = allArray.filter(function(staff){
return staff.is_consult;
});
} else {
// If no consults, default to all
$scope.isAllActive = true;
$scope.staffList = allArray;
}
});
// Watch for new/updated/removed staff for this specialty
Staff.$watch(function(event){
var allArray = Staff.getBySpecialtyId(specialtyId);
hasConsults = getHasConsults(allArray);
// Sort the lists
allArray.sort(sortList);
$scope.allStaff = allArray;
if($scope.isConsultsActive){
$scope.staffList = allArray.filter(function(staff){
return staff.is_consult;
});
}
});
...
And my services.js has the following services defined:
.service('Staff', function($firebaseArray, $window){
var staffList = $firebaseArray.$extend({
...
});
var ref = new $window.Firebase(FIREBASE_URL).child("staff");
var syncArray = new staffList(ref);
return syncArray;
})
.service('Teams', function($firebaseArray, $window){
var staffList = $firebaseArray.$extend({
...
});
var ref = new $window.Firebase(FIREBASE_URL).child("teams");
var syncArray = new staffList(ref);
return syncArray;
})
The $scope.specialty is the object that doesn't always seem to get filled. I am having the same problem on the teams page as well, but the example is almost exactly the same as this.