AngularJS в области действия директивы не определено

Question

В родительском контроллере я делаю запрос Http и получаю данные

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;
  }); 
});

Затем я пытаюсь передать данные в свою директиву список

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

В списке Я пытаюсь получить это ctrl.globalState.songsData, но в консоли я вижу 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
   },
  };
})

Когда я жестко запрограммировал данные <list data='[1,2,3]'></list> - все в порядке, в моей области я могу видеть данные, но из запроса - undefined