I am using the geofire library with angularjs. I noticed something odd happening when writing out a basic geolocation based query. Upon a state change, the page displays blank and the query doesn't appear to execute. However, if I ctrl + f5, the data displays and query executes.
I wondering why this is happening. I've included my controller code below. Any help is appreciated, I've been trying numerous things (tried updating user's geolocation to force an event to get triggered, $timeout, etc).
'use strict';
angular
.module('m02-discover')
.controller('DiscoverController', [
'$scope', '$state', 'fbRef', 'fbGeo', '$geofire', 'Discover', '$timeout',
function($scope, $state, fbRef, fbGeo, $geofire, Discover, $timeout) {
var ref = new Firebase(fbRef);
var geoRef = new Firebase(fbRef + 'geofire/');
var $geo = $geofire(geoRef);
$scope.searchResults = [];
var query = $geo.$query({
center: [37.68465, -122.1420265],
radius: 10
});
// Setup Angular Broadcast event for when an object enters our query
var geoQueryCallback = query.on('key_entered', 'SEARCH:KEY_ENTERED');
// Listen for Angular Broadcast
$scope.$on('SEARCH:KEY_ENTERED', function (event, key, location, distance) {
// Do something interesting with object
ref.child('users').child(key).once("value", function(snapshot) {
var user = snapshot.val();
$scope.$apply(function(){
$scope.searchResults.push(user);
});
});
// Cancel the query if the distance is > 50 km
if(distance > 50) {
geoQueryCallback.cancel();
}
});
$scope.favoriteUser = function(favoritedID, favoritedTwitterID){
Discover.favoriteUser(favoritedID, favoritedTwitterID);
}
}
]);