Basically, I have two directives:

```
angular.module("maineMap")
.directive("ngMap", ["APPCONFIG", "Map", function(config, Map){
       //D3 map drawing functionality based on data from $resource call
       return {
        restrict : "E",
        transclude : true,
        scope : {
            mapData : '='
        },
        link : function(scope, el, attrs){
                   }
        };
    }])
    .directive("donutChart", function(){
    return {
        restrict : "E",
        link : function(scope, el, attrs){
                    }
            }
    });

```

and a controller

```
angular.module("maineMap")
.controller('MapCtrl', ['$scope','Map', function($scope, Map{
    $scope.mapData = Map.mapData()  
                        .query();

    $scope.mapData.$promise.then(function(results){
        $scope.mapData = results;
        console.log($scope.mapData);
    });

}]);

```

where `Map` is a `$resource` implementation to get a JSON file.

My issue is that the directive functionality is executing prior to the controller call. That is, I call upon several properties of `mapData` within the directives, and they are all returning undefined with corresponding error messages in the console. However, shortly after the error printout, the data fetch from the `$resource` implementation executes and is printed to console.

Note that if I replace the `$promise` and depend solely on 

```
$scope.mapData = Map.mapData()  
                        .query();

```

then I have `$scope.mapData` visible in the `<donut-chart>` directive, but not `<ng-map>`.

Given this kind of structure, how can I delay the directive functionality until after the controller loads the data?