AngularJs в директиве scope показывает undefined, как избежать?

Question

[ksuha2uha]

В родительском контроллере делаю 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;
  }); 
});

Затем, отправляю данные директиве *list*

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

В директиве list пытаюсь получить данные `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
   },
  };
})

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