Angularjs directive scope seems not binding to value - angularjs

Question

Please spare me if this is a beginner type of question. I'm playing Highcharts.js with Angular.js, but it's seems like directive scope is not binding to value. Below are my codes.
HTML - but it's working inside this expressions {{xaxis}} {{seriesdata}}
<div class="container" ng-controller='chartController'>
<div class="row">
<div class="col-md-6">
<line-chart xaxis='xaxis' seriesdata='seriesdata'></line-chart>
{{xaxis}}
{{seriesdata}}
</div>
<div class="col-md-6">
<bar-chart options='pieOptions'></bar-chart>
</div>
</div>
</div>
directive.js
(function() {
'use strict';
angular
.module('chart')
.directive('lineChart', lineChartDirective);
/* #ngInject */
function lineChartDirective() {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
scope: {
xaxis: '=xaxis',
seriesdata: '=seriesdata'
},
link: function(scope, element) {
Highcharts.chart(element[0], {
chart: {
type: 'spline',
zoomType: 'x'
},
plotOptions: {
line: {
dataLabels: {
enabled: true
}
}
},
title: {
text: 'Profit Ratio by Month'
},
xAxis: {
categories: scope.xaxis
},
yAxis: {
title: {
text: 'Profit %'
}
},
series: [
{
name: 'Total',
data: scope.seriesdata
}
]
});
}
}
}
})();
service.js
(function() {
'use strict';
angular
.module('chart')
.factory('chartData', chartDataFactory);
chartDataFactory.$inject = ['$http'];
/* #ngInject */
function chartDataFactory($http) {
function getData() {
return $http.get('../../data/sampleData.json').then(function(result) {
return result.data;
})
}
return {
getData: getData
}
}
})();
controller.js
(function() {
'use strict';
angular
.module('chart')
.controller('chartController', chartController);
chartController.$inject = ['$scope', 'chartData', 'lodash'];
/* #ngInject */
function chartController($scope, chartData, lodash) {
var vm = this;
chartData.getData().then(function(data) {
$scope.chartData = data;
$scope.xaxis = data.SEO[0]["SEO-MOD-001"]["SEO-END-001"];
$scope.seriesdata = data.SEO[0]["SEO-MOD-001"]["SEO-END-002"];
console.log($scope.xaxis);
console.log($scope.seriesdata);
});
$scope.pieOptions = {
chart: {
type: 'column'
},
title: {
text: 'Projects'
},
xAxis: {
categories: ['Noreil', 'Ken', 'Alfie', 'Francis']
},
yAxis: {
title: {
text: 'Completed Projects'
}
},
series: [
{
name: 'Quarter 1',
data: [23, 11, 34, 26]
},
{
name: 'Quarter 2',
data: [14, 20, 26, 30]
}
]
}
}
})();

Answer 1

When the directive link function gets executed, you don't have data yet. So try following in link function:
var unwatch = scope.$watch('[xaxis, seriesdata]', function (results) {
if (results[0] && results[1]) {
init();
unwatch();
}
}, true);
function init() {
// Highcharts.chart(element[0], { ...
}