Web Sql not updating view

When I’m switching to my details view the framework is not properly updating the view with the data. So I have the following code:

$scope.registrant = {};
Registrants.get($stateParams.ID).then(function(r){
  $scope.registrant = r;
});

My service is:

var deferred = $q.defer();
  db.transaction(function(t){
    t.executeSql('SELECT * FROM registrants WHERE ID=? LIMIT 1', [ID], function(t, r){
				if(r.rows.length === 1){
					var row = r.rows.item(0);
					console.log('row', row);
					deferred.resolve(row);
				}
			}, function(t, err){
				console.error(err.message, err.code);
			});
		});
		return deferred.promise;

This works great in a desktop browser 100% of the time. On a mobile browser and then when compiled to an app this only works maybe 50% of the time. The other 50% the view is just the blank template. It’s going to the correct page and the data is showing up when I do console.log. Like I said this works 100% of the in any newer browser, but not even if I put the files on a server and try to serve them up from my device.

If I use vanilla angular what I want works great 100% of the time. Any help would be appreciated. Thanks!

You should only attempt to read from the DB once the ondeviceready event has fired. In Ionic you can make this work by adding the call to your service in your controller inside of:

ionic.Platform.ready(function(){ ... });

That wasn’t what I was trying to do, but I needed to do was

$rootScope.$apply(function(){
    deferred.resolve(row);
});

Thanks for the help.