ng-show doesn't reveal instantly but on page change? - angularjs

Question

I have this code to show loading message.
<ion-view title="Rooms">
<ion-content>
<ion-list ng-show="rooms">
<ion-item class="item-icon-left" ng-repeat="room in rooms" type="item-text-wrap" ng-click="openChatRoom(room.id)">
<i class="icon {{room.icon}}"></i>
<h2>{{room.name}}</h2>
</ion-item>
</ion-list>
<ion-list ng-hide="rooms.length">
<ion-item class="textCenter">
<i class="icon ion-loading-c"></i> Loading Rooms
</ion-item>
</ion-list>
</ion-content>
What it does now is just showing "loading Rooms" for awhile and nothing shows up.
But when I change page and return to this page again, items in ng-show just shows up and never show "loading Rooms" again.
So why this ng-show doesn't reveal instantly? Below are its controllers
.controller('RoomsCtrl', function($scope, Rooms, Chats, $state, $ionicModal) {
//console.log("Rooms Controller initialized");
$scope.rooms = Rooms.all();
console.log($scope.rooms);
$scope.openChatRoom = function (roomId) {
$state.go('app.chat', {
roomId: roomId
});
};
})
.factory('Rooms', function ($firebase) {
// Might use a resource here that returns a JSON array
var ref = new Firebase(firebaseUrl);
var rooms = $firebase(ref.child('rooms')).$asArray();
return {
all: function () {
return rooms;
},
get: function (roomId) {
// Simple index lookup
return rooms.$getRecord(roomId);
}
}
});