title: AngularJS: Watching for async values within directive's linking function
body: <p>I'm using ng-grid for data display and I want to dynamically adjust height of the grid itself depending on the number of returned results and user's monitor resolution.</p>
  
  <p>Here's the angular code:</p>
  
  <pre><code>angular.module('modulename', [])
  
      .controller('ctrl', function($scope, $http) {
  
          $scope.gridResult = [];
  
          $scope.gridOptions = {
             data: 'gridResult'
          };
  
          $scope.listData = function() {
              //Async call using $http.get which on success callback asigns response.data to $scope.gridResult
          }
  
          //Get data when page loads
          $scope.listData();
  
      })
  
      .directive('tableheight', function() {
          return {
              restrict: 'A',
              scope: {
  
              },
              controller: 'ctrl',
              link: function(scope, elem, attrs) {
                  scope.$watchCollection('gridResult', function(n, o) {
                      console.log(n); //Shows empty array
                      if (n.length &gt; 0) {
                          console.log(n) //Never displayed
  
                          //Calculate new size for the grid
                          ...
                      }
                  });
              }
          };
      });
  </code></pre>
  
  <p>HTML portion:</p>
  
  <pre><code>&lt;div data-ng-grid="gridOptions" tableheight&gt;&lt;/div&gt;
  </code></pre>
  
  <p>As you can see 'gridResult' is always empty array even after 'listData' success callback. If I move whole $watchCollection method to controller body everything is working as expected. What I'm trying to achieve is somehow run directive's linking function after DOM has been rendered which includes rendering data from async call.</p>
  
  <p>I guess I'm doing something wrong here or my approach is wrong, however I would appreciate if someone could offer a solution to this.</p>
  
  <p>On a subject of calling directive's linking function after DOM is rendered and ready I tried putting the code inside angular's $timeout with 0 delay but that didn't do anything for me. And speaking of this is there any way to call directive's linking function after DOM rendering since I believe some of my problems are coming from this issue?</p>