AngularJs shows undefined in scope directive, how to avoid?

Question

JavaScript

I make an http request in the parent controller

app.controller("playerController", function (
  $scope,
  $rootScope,
  $http,
) {
  const ctrl = this;
  ctrl.globalState = $rootScope.state;
  $http({
    method: "GET",
    url: "https://api.deezer.com/artist/338/top?limit=30",
  }).then((response) => {
    ctrl.globalState.songsData = response.data.data;
  }); 
});

Then, I send the data to the *list* directive

<div class="list-group">
      <list data='ctrl.globalState.songsData'></list>
</div>

In the list directive I try to get the data `ctrl.globalState.songsData` but in the console it displays undefined

app.directive("list", function () {

  return {
    replace: true,
    scope: {
      data: "=",
    },
    templateUrl: "directives/list/list.html",
    controllerAs: "ctrl",
    controller: function ($scope, $rootScope, $playerService) {
      const ctrl = this;
      console.log($scope.data);    // undefined
   },
  };
})

When I hardcoded data <list data='[1,2,3]'></list>- everything is fine, it outputs to the console in the scope, but when I make a request and send the data, it comes-undefined