The chart doesn't show for data from $http in Highchart - angularjs

Question

I get the chart when I hard code the data. But when I get the data from a server I don't see the chart. I saw many questions on this but they didn't help me. I change the data object with the scope variable but I still don't get the data
This is what I've done:
angular.module('myModule', [])
// Directive for generic chart, pass in chart options
.directive('hcPieChart', function () {
return {
restrict: 'E',
template: '<div></div>',
scope: {
title: '#',
data: '='
},
link: function (scope, element) {
Highcharts.chart(element[0], {
chart: {
type: 'pie'
},
title: {
text: scope.title
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: scope.data
}]
});
}
};
})
.controller('myController', function ($scope,$http) {
$scope.GType = function(){
console.log("GType");
$http.get('http://192.168.1.100:5000/getPDAServiceAssignStatus')
.then(function (response) {
$scope.pieData = [];
console.log(JSON.stringify(response)+" Res");
for(i=0;i<response.data.length;i++){
$scope.pieData.push({
name: response.data[i].name,
y:response.data[i].y
});
}
console.log($scope.pieData);
});
}
$scope.GType();
// $scope.pieData = [{
// name: "Microsoft Internet Explorer",
// y: 56.33
// }, {
// name: "Chrome",
// y: 24.03,
// sliced: true,
// selected: true
// }, {
// name: "Firefox",
// y: 10.38
// }, {
// name: "Safari",
// y: 4.77
// }, {
// name: "Opera",
// y: 0.91
// }, {
// name: "Proprietary or Undetectable",
// y: 0.2
// }]
});