Charts do not render unless I reroute to another page and go back to my charts route - angularjs

Question

I am working on dashboard chart. I am using chartjs for my charts and angularjs http.get method to get data from the server to my charts. I checked the console and the data is loaded and working properly, but the charts won't render unless I reroute to another page and then go back to my charts route page.
This is the code:
$scope.tripTotalts = "";
$scope.tripdstatus = "";
$scope.tripddstatus = "";
$scope.tripcstatus = "";
$scope.totalshow = "";
$scope.tripStatus = function() {
$http.get("/api/statusDispatched").success(function(response) {
dispatched = response;
$scope.tripdstatus = response[0];
});
$http.get("/api/statusDelivered").success(function(response) {
delivered = response;
$scope.tripddstatus = response[0];
});
$http.get("/api/totalTripsintheSystem").success(function(response) {
$scope.tripTotalts = response[0];
totalFleetTrips = response[0];
});
$http.get("/api/statusCompleted").success(function(response) {
completed = response;
$scope.tripcstatus = response[0];
});
$scope.totalshow = Math.round(((dispatched+delivered+completed) / totalFleetTrips) * 100)
console.log("CHECKOUT HERE");
console.log(dispatched);
console.log(delivered);
console.log(completed);
var tstatid = $("#tstatusChart");
tstatid.attr('height', 100);
var tripsatusChartInitiate = new Chart(tstatid, {
type: 'pie',
data: {
datasets: [{
data: [dispatched, delivered, completed],
backgroundColor: [
"rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
"rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
"rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)"
],
borderColor: [
"rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
"rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
"rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)"
], borderWidth: 1
}],
labels: ["Dispatched", "Delivered", "Completed"]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var allData = data.datasets[tooltipItem.datasetIndex].data;
var tooltipLabel = data.labels[tooltipItem.index];
var tooltipData = allData[tooltipItem.index];
var total = 0;
for (var i in allData) {
total += allData[i];
}
var tooltipPercentage = Math.round((tooltipData / total) * 100);
return '[Day: ' +tooltipLabel + '] Data: ' + tooltipData + ' [Percentage: ' + tooltipPercentage + '%]';
}
}
},
animation: {
duration: 0
}
}
});
}