Passing data from a function inside controller to a function inside a directive in angular

Question

I have a function inside an angular controller that calls a factory to request data from an API and calls a function inside a directive, This is working fine. But the retrieved data needs to be passed into the function inside the directive and I can't seem to get anything besides 'undefined' as the data inside the directive function, whereas in the controller function it's working fine. I have used .then() to chain the data retrieval and the directive function call to make them run consecutively, but it doesn't help, I can't seem to pass anything defined inside the function in controller to the directive function.

My code looks like this:

Controller

angular.module('myControllerModule', ['getData'])
.controller('myViewController', function($scope, getDataFactory){

    // Mapping the directive function to controller
    $scope.setDirectiveFn = function(directiveFn){
        $scope.directiveFn = directiveFn;
    };

    // the function used for the factory and directive function call 
    $scope.search = function(){
        $scope.RetreivedData = getDataFactory.getTheData()
           .then(function successCallback(response){
                $scope.data = response.data; // This is not passed
            }).then($scope.directiveFn())
    };
});

Factory

angular.module('getData',[])
.factory('getDataFactory', function($http){
    return{
        getTheData: function() {
            return $http({
                url: 'url/to/API/endpoint',
                method: 'GET'
            })
        },
    }
});

Directive

angular.module('myChartModule')
.directive('chart', function (){
    return{
        restrict: 'E',
        scope: {
            data: '=',
            setFn: '&',
        },
        controller: 'myViewControllerr',
        templateurl: '/path/to/my/template/file.html',
        link: function link(scope, element, attr){

          scope.drawChart = function(){    
            var chartData = scope.data; //undefined
            console.log(chartData);
          };
          // mapping the directive funtion to contorller
          scope.setFn({theDirFn: scope.drawPSA});
        }
    }
});

HTML

<chart data= 'data' set-fn="setDirectiveFn(theDirFn)"></chart>

I can't seem to find a way to solve this, and more importantly, I'm not really sure where the problem lies...

Answer 1

Finally solved this. It was a problem with the promise chain. I wrapped the directive function call inside the controller search function to an anonymous function And now the data is coming through.

$scope.search = function(){
    $scope.RetreivedData = getDataFactory.getTheData()
        .then(function successCallback(response){
            $scope.data = response.data;
         })
         .then(function(data){
            $scope.directiveFn($scope.data)
         })
};