Scope variables not loading on page load AngularJS - angularjs

Question

I have a chart on one of my views in my one page app using angular-chart.js http://jtblin.github.io/angular-chart.js/. The issue is that the chart won't load when the view initializes because the data hasn't yet loaded via the API in the factory. No matter how long I stay on that view, the data won't populate. However, if I go to a different view on the one page app, and come back, the data is there, since it has already loaded in the factory.
It's my understanding that once the data is loaded from factory, that the chart should update immediately because of data bindingl, but why won't it do this on the first view?
Factory (where the data is loaded via service.getChartData())
app.factory('chartFactory', ['$http', function($http) {
var service = {
height_chart: window.innerHeight * 0.4,
labels: [],
series: ['GDAX Value'],
data: [],
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
id: 'y-axis-1',
// type: 'linear',
display: true,
position: 'left',
ticks: {
beginAtZero: false,
callback: function(value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}],
xAxes: [{
display: false
}]
}
},
getChartData: function() {
$http.get('/portfolio/get-chart-data')
.then(function(response) {
service.labels = response.data[0]
service.data = response.data[1]
})
}
}
return service
}])
Controller
app.controller('chartCtrl', chartCtrl)
chartCtrl.$inject = ['$scope', '$interval', 'chartFactory']
function chartCtrl($scope, $interval, chartFactory) {
var vmChart = this
vmChart.height_chart = chartFactory.height_chart
vmChart.labels = chartFactory.labels
vmChart.series = chartFactory.series
//this data hasn't loaded yet.
vmChart.data = [chartFactory.data]
vmChart.onClick = function(points, evt) {
console.log(points, evt)
}
vmChart.datasetOverride = [{
yAxisID: 'y-axis-1'
}]
vmChart.options = chartFactory.options
chartFactory.getChartData()
//the chart never shows up on the first view, even after the function loads the data in the factory.
}
<div ng-controller="chartCtrl as vmChart" class="chart-container">
<canvas id="line" class="chart chart-line" chart-data="vmChart.data" chart-labels="vmChart.labels" chart-series="vmChart.series" chart-options="vmChart.options" chart-dataset-override="vmChart.datasetOverride" chart-click="vmChart.onClick" style="width:100%;">
</canvas>
</div>
Just to clarify - the chart does load, but not until I switch to a different view then back again. How do I get the chart to load on. the first view once the data is loaded in the factory?

Answer 1

A http request takes around 200 ms to fetch data but the DOM gets loaded before the request is completed.So the first time when you land on the page ,the chart data gets populated but only after the whole page has been loaded.
Try this:
Make the getChartData function 'async' and add 'await' to http request to tell DOM to wait till the request has been completed.
In Chart Factory :
getChartData: async function() {
await $http.get('/portfolio/get-chart-data')
.then(function(response) {
service.labels = response.data[0]
service.data = response.data[1]
})
}

Answer 2

Please add chartFactory.getChartData() after vm declaration, like below-
app.controller('chartCtrl', chartCtrl)
chartCtrl.$inject = ['$scope', '$interval', 'chartFactory']
function chartCtrl($scope, $interval, chartFactory) {
var vmChart = this
chartFactory.getChartData()
vmChart.height_chart = chartFactory.height_chart
vmChart.labels = chartFactory.labels
vmChart.series = chartFactory.series
//this data hasn't loaded yet.
vmChart.data = [chartFactory.data]
vmChart.onClick = function(points, evt) {
console.log(points, evt)
}
vmChart.datasetOverride = [{
yAxisID: 'y-axis-1'
}]
vmChart.options = chartFactory.options
//the chart never shows up on the first view, even after the function loads the data in the factory.
}