javascript - Angular data issue- not sure how to troubleshoot -

i have controller (code below) links d3-cloud directive , works perfectly. data added in controller , passed directive.

myapp.controller('downloadscloudctrl', ['$scope',                                          '$rootscope',                                          'requestservice',                                         '$cookiestore',   function($scope, $rootscope, requestservice, $cookiestore){   $scope.d3data = [     {         'kword': 'a',         'count': 141658,     },{         'kword': 'b',         'count': 105465,     }   ]; }]); 

now i'm trying pull data json request service switching controller following code. when console.log in controller underneath $scope.d3data = data line, appears working (the proper data returned).

however, breaks when trying link controller directive, reason the directive getting undefined/null data set.

i'm wondering if issue in the order code executes. perhaps controller tries pass data directive before json service has finished, resulting in no graph being drawn. happening, , if so, how can go fixing it?

myapp.controller('downloadscloudctrl', ['$scope',                                          '$rootscope',                                          'requestservice',                                         '$cookiestore',   function($scope, $rootscope, requestservice, $cookiestore){   $rootscope.$on('updatedashboard', function(event, month, year) {     updatedashboard(month, year);   });    var updatedashboard = function(month, year) {     requestservice.getp2pkeyworddata(month, year).then(function(data) {       $scope.d3data = data;     });   };    updatedashboard($cookiestore.get('month'), $cookiestore.get('year')); }]); 

edit: directive code:

myapp.directive('d3cloud', ['$window',                              'd3service',                              'd3cloud',                              function($window,                                       d3service,                                       d3cloud) {   return {      // restrict usage element/attribute     restrict: 'ea',      // manage scope properties     scope: {        // bi-directional data binding       data: '=',        // bind dom attribute       label: '@'     },      // link dom     link: function(scope, element, attrs) {        // load d3 service       d3service.d3().then(function(d3) {          // re-render on window resize         window.onresize = function() {           scope.$apply();         };          // call render function on window resize         scope.$watch(function() {           return angular.element($window)[0].innerwidth;         }, function() {           scope.render(scope.data);         });          // render d3 chart         scope.render = function(data) {          // d3 specific appends... not important 

html code: (simple enough)

  <div class="col-md-6">     <div class="module">       <div class="inner-module" ng-controller="downloadscloudctrl">         <div class="module-graph">           <d3-cloud data="d3data"></d3-cloud>         </div>       </div>     </div>   </div> 

try adding $scope.$apply() after $scope.d3data = data;

$scope.d3data = data; $scope.$apply(); 

if doesn't work, can pass function down directive , set update data , manually call controller:

so controller logic:

$scope.updatedirective = function () {}; // overridden in directive 

directive logic:

scope: {   data: '=',   update: '&updatedirective'   label: '@' }  scope.updatedirective = function () {   scope.render(scope.data); // call update function }; 

markup:

  <div class="col-md-6">     <div class="module">       <div class="inner-module" ng-controller="downloadscloudctrl">         <div class="module-graph">           <d3-cloud data="d3data" update-directive="updatedirective"></d3-cloud>         </div>       </div>     </div>   </div>