I have a problem when making an ionic app about the chart cannot get response when page loads first time with "Item 1" and "New York" as initial selected option like my screenshot below: 
controller.js
.controller('DashCtrl', ['$scope', '$q', '$http', '$timeout', '$interval', '$state', '$filter', '$location', 'DOLLTYPE', 'REGION', function($scope, $q, $http, $timeout, $interval, $state, $filter, $location, DOLLTYPE, REGION) {
$http
.get('js/data2.json')
.then(function(region) {
var i = region.length -1;
for (i; i >= 0; i--) {
REGION.add(region[i]);
};
})
.catch(function(error){
console.log('Error fetching region data: ', error)
})
$http
.get('js/data.json')
.then(function(result) {
var i = result.length -1;
for (i; i >= 0; i--) {
DOLLTYPE.add(result[i]);
};
})
.catch(function(error){
console.log('Error fetching doll data: ', error)
})
$scope.title = "Dashboard";
$scope.dash = [];
$scope.datas = [];
$scope.avg = [];
$scope.avgy = [];
$scope.data = [[]];
$scope.labels = [[]];
$scope.date = [];
$scope.place = [];
$scope.ayv = [];
$scope.dolltype = [];
DOLLTYPE
.all()
.then(function(dolltype){
$scope.dolltype = dolltype;
$scope.dash2 = $scope.dolltype[0];
});
$scope.regiontype = [];
REGION
.all()
.then(function(regiontype){
$scope.regiontype = regiontype;
$scope.dash1 = $scope.regiontype[0];
})
$scope.change = function(dash1) {
$scope.place = dash1;
}
$scope.change2 = function(dash2) {
$scope.doll= dash2.id;
}
$scope.place.name = 'Please select';
$scope.$watchCollection('[place, doll]', function(newVal, oldVal) {
$scope.colours = [
{ // Blue
fillColor: 'rgba(148,159,177,0)',
strokeColor: 'rgba(47,64,200,1)',
pointColor: 'rgba(67,43,177,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(148,159,177,0.8)'
},
{ // Red
fillColor: 'rgba(77,83,96,0)',
strokeColor: 'rgba(200,15,9,1)',
pointColor: 'rgba(190,50,11,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(77,83,96,1)'
},
{ // Green
fillColor: 'rgba(77,83,96,0)',
strokeColor: 'rgba(18,177, 26,1)',
pointColor: 'rgba(80,200,11,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(77,83,96,1)'
}
];
$http.get('js/data4.json').success(function(result) {
var deferred = $q.defer();
$scope.dash.msg = result.message;
$scope.prices = result.data;
deferred.resolve($scope.prices);
angular.forEach($scope.prices,function(value,index){
var values = {
value : value.value,
date : new Date(value.created_at.replace(/-/g,"/"))
};
$scope.datas.push(values.value);
$scope.dash.price = $scope.datas[2];
$scope.date.push($filter('date')(values.date,'dd-MMM'));
$scope.date.splice(2);
return deferred.promise;
})}).error(function(data, status) {
console.error('Error', status, data);
}); //End get price value
$http.get('js/data5.json').success(function(result) {
$scope.averageprice = result.data;
angular.forEach($scope.averageprice,function(value,index){
var avgvalue = {
average: value.average,
date : new Date(value.created_at.replace(/-/g,"/"))
};
console.log (avgvalue);
$scope.avg.push(avgvalue.average);
})}).error(function(data, status) {
console.error('Error', status, data);
}); //End get average price value
var deferred = $q.defer();
$http.get('js/data3.json').success(function(result) {
$scope.averageyearprice = result.data;
deferred.resolve($scope.averageyearprice);
console.log ($scope.averageyearprice);
$scope.avgy.push($scope.averageyearprice.yearly_average);
return deferred.promise;
}).error(function(data, status) {
}); //End get average year price value
$scope.data[0] = $scope.datas;
$scope.data[1] = $scope.avg;
$scope.data[2] = $scope.avgy;
$scope.labels = $scope.date;
console.log ($scope.data[0]);
$scope.series = [$scope.place.name, 'All (Average)', 'All (YTD Year)'];
console.log ($scope.series); // Add information for the hover/touch effect
})
}])
HTML Template
<ion-view cache-view="false" view-title="{{title}}">
<ion-nav-bar class="nav-title-slide-ios7 bar-assertive"></ion-nav-bar>
<ion-content class="has-header">
<div class="list">
<div class="row item">
<div class="col text-left assertive"> <select name='options' ng-model="dash2" ng-change="change2(dash2)" ng-options="DOLLtype as DOLLtype.name for DOLLtype in dolltype">
</select></div>
<div class="col text-right assertive"> <select name='options' ng-model="dash1" ng-change="change(dash1)" ng-options="REGIONtype as REGIONtype.name for REGIONtype in regiontype">
</select></div>
</div>
<div class="row item">
<div class="col">Current Price</div>
<div class="col text-right assertive">{{dash.price}} %</div>
</div>
</br>
<div class="row item" id="container">
<div class="col text-center">
<p>{{dash.msg}}</p>
<canvas id="line" class="chart chart-line" data="data" labels="labels" series='series' height="100" legend="true" colours="colours"></canvas>
</div>
</div>
</ion-content>
</ion-view>
I am using angular chart plugin for my app. Could anyone help me to solve this problem? Please check this link for full example code.
