title: angularJS: watch async data in directive
body: <p>I'm trying to watch a async data in my directive, here is my JS code:</p>
  
  <pre><code>(function(angular) {
      var myApp = angular.module('testTree', []);
  
      myApp.config(function($httpProvider) {
  
          $httpProvider.defaults.headers.get = {};
  
          $httpProvider.defaults.headers.get["Content-Type"] = "application/json";
  
      });
  
      myApp.factory('DataService', function($http) {
  
          return { getData: function(prmParentId, prmParentSrc) {
              var data = $.param({ 'parentId': prmParentId, 'parentSrc': prmParentSrc });
              return $http.get("Temp.aspx/GetData", { params: { parentId: prmParentId, parentSrc: prmParentSrc }, data: '' }).
              success(function(result) {
                  return result.d;
              });
          }
          }
      });
  
      myApp.controller('myController', myController);
  
      function myController($scope, DataService) {
          $scope.treeNodes = [];
          $scope.init = function() {
  
              DataService.getData(0, 0).then(function(promise) {
                  $scope.treeNodes = promise.data.d;
              });
          }
  
          $scope.focusNode = function() {
              console.log("kuku2");
          }
  
      }
  
      myApp.directive('nodes', function() {
          return {
              restrict: "E",
              replace: true,
              scope: {
                  nodes: '=',
                  clickFn: '&amp;'
              },
              template: "&lt;ul&gt;&lt;node ng-repeat='node in nodes' node='node' click-fn='clickFn()'&gt;&lt;/node&gt;&lt;/ul&gt;",
              link: function(scope, element, attrs) {
                  scope.$watch('treeNodes', function(newVal, oldVal) {
  
                      console.log(scope.treeNodes);
                  }, true);
              }
  
          }
      });
  
      myApp.directive('node', function($compile) {
          return {
              restrict: "E",
              replace: true,
              scope: {
                  node: '=',
                  clickFn: '&amp;'
              },
              template: "&lt;li&gt;&lt;span ng-click='clickFn()(node)'&gt;{{node.ObjectName}}&lt;/span&gt;&lt;/li&gt;",
              link: function(scope, element, attrs) {
  
                  if (angular.isArray(scope.node.Children)) {
  
                      element.append("&lt;nodes nodes='node.Children' click-fn='clickFn()'&gt;&lt;/nodes&gt;");
  
                      $compile('&lt;nodes nodes="node.Children" click-fn="clickFn()"&gt;&lt;/nodes&gt;')(scope, function(cloned, scope) {
  
                          element.append(cloned);
                      });
                  }
              }
          }
      });
  })(angular);
  </code></pre>
  
  <p>And this is my HTML:</p>
  
  <pre><code>   &lt;div ng-app="testTree"&gt;
          &lt;div ng-controller="myController"&gt;
              &lt;div ng-init="init()"&gt;
                  &lt;nodes node="treeNodes" click-fn="focusNode"&gt;&lt;/nodes&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The console in the directive's watch is always "undefined". What am I doing wrong here? 
  thanks.</p>