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

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
                }
        }
        });

}