I've encountered an issue with my code while using CartoDB. The goal is to execute a query using their JS library and retrieve some data. The problem arises when I attempt to assign the result as a scope variable in AngularJS, after successfully working inside the done() function. Here's a snippet of the code. EDIT: My apologies for the confusion earlier. By saying "doesn't work", I meant that I always receive the default value of mvcTotal = 0, instead of the computed value from the JavaScript.
angular.module('angMvcApp')
.controller('DataCtrl', ['$scope', '$routeParams', function ($scope, $routeParams) {
var borough = $routeParams.borough;
var sql = new cartodb.SQL({user: 'wkaravites'});
var table = 'qiz3_axqb';
var mvcTotal = 0;
if (borough != null) {
$scope.borough = borough;
} else {
$scope.borough = "Data Overview";
sql.execute("select borough, count(*) from qiz3_axqb group by borough")
.done(function(data) {
$.each(data.rows, function(index, value) {
console.log("pizza: " +value['count']);
mvcTotal += value['count'];
});
console.log(mvcTotal +" totals");
$scope.mvcTotal = mvcTotal;
})
.error(function(errors) {
console.log("errors:" + errors);
});
console.log(mvcTotal+" test test");
$scope.mvcTotal = mvcTotal;
#scope.mvcTotal = 57;
}
}]);
Is there an error in how I'm assigning a regular variable to an Angular scope variable? In the JS console, I can see the log with pizza and the correct number followed by "totals."
Below is the HTML view:
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>{{borough}}</h1>
<p>{{mvcTotal}} motor vehicle collisions</p>
</div>
</div>
</div>