title: Kendo UI AngularJs grid directive, undefined
body: <p>In a ticket entry page, I have a main ticketEntry.html page, which contains one grid for the lines and one for the payments.</p>
  
  <p>When ticketEntry.html is loaded, it must first retrieve the ticket view model (via ajax calls to Web API).  The line and payment grid cannot retrieve their data until the ticket view model has been received.  </p>
  
  <p><strong>In my current solution, I have to use $timeout in the controller for ticketEntry.html for this to work.  I am looking for a cleaner way.</strong> </p>
  
  <p>Extracts from ticketEntry.html: </p>
  
  <pre><code>&lt;div ng-controller="ticketLineController"&gt;
      &lt;div id="ticketLineGridDiv" kendo-grid="ticketLineGrid" k-options="ticketLineGridOptions"&gt;&lt;/div&gt;
  &lt;/div&gt;
  ...
  &lt;div ng-controller="ticketPaymentController"&gt;
      &lt;div id="ticketPaymentGridDiv" kendo-grid="ticketPaymentGrid" k-options="ticketPaymentGridOptions"&gt;&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>In the controller for ticketEntry.html, I have this:</p>
  
  <pre><code>$timeout(function () {
      ticketService.getTicket(ticketId).then(
          function(ticket) {
              $scope.initPos(ticket);
          },
          ...);
  }, 500);
  
  $scope.initPos = function(ticket) {
      $scope.ticket = ticket;   &lt;-- $scope.ticket is used by the line and payment grid
      $scope.$broadcast('PosReady');  &lt;-- Tell the payment and line controllers to load their grids
  }
  </code></pre>
  
  <p>As you can see, I am using $timeout to delay for 500ms, then I get the ticket view model and broadcast to the line and payment controller that they now can load their grids.</p>
  
  <p>Here is the listener in the line controller:</p>
  
  <pre><code>$scope.$on('PosReady', function (event) {
      $scope.ticketLineGrid.setDataSource(getGridDataSource());
      $scope.ticketLineGrid.dataSource.read(); 
  });
  </code></pre>
  
  <p><strong>The problem is that if I do not use $timeout in the ticket entry controller,  $scope.ticketLineGrid is sometimes undefined here (same thing with the payments controller).</strong></p>
  
  <p>I have tried using angular.element(document).ready(function () {...} instead of $timeout in the ticket entry controller, but that did not handle the issue.  </p>
  
  <p><strong>How do I know when $scope.ticketLineGrid (for example) has been created/defined?</strong></p>
  
  <p><strong>What is the proper way of handling this kind of scenario?</strong> </p>
  
  <p><strong><em>Update 9/27/2014, to provide more data on how the ticket line grid gets initialized:</em></strong></p>
  
  <p>In the AngularJs directive in ticketEntry.html, the k-options specifies the definition object for the grid:</p>
  
  <pre><code>&lt;div id="ticketLineGridDiv" kendo-grid="ticketLineGrid" k-options="ticketLineGridOptions"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>ticketPaymentGridOptions is just an object with properties that defines the grid:</p>
  
  <pre><code>$scope.ticketPaymentGridOptions = {
    autoBind: false,
    height: 143,
    columns: [
      {
          field: "payCode", title: "PayCode",
      },
      {
          field: "amount", title: "Amount", format: "{0:n2}", attributes: { style: "text-align:right" },
      },
    ],
    pageable: false,
    ...
  };
  </code></pre>
  
  <p><strong><em>Update 9/29/2014: This is the solution I went with, based on suggestion by Valentin</em></strong></p>
  
  <p>I use two watches - one in the child scope where the ticketLineGrid lives:</p>
  
  <pre><code>$scope.$watch('ticketLineGrid', function (newVal) {
    if (angular.isDefined(newVal)) {
      $scope.ticketControl.lineGridReady = true;
    }
  });
  </code></pre>
  
  <p>This watch sets the parent property $scope.ticketControl.lineGridReady = true once the grid has been initialized.</p>
  
  <p>The parent (ticketEntryController) has watches for lineGridReady:</p>
  
  <pre><code>$scope.$watch('ticketControl.lineGridReady', function (gridReady) {
    if (gridReady) {
      $scope.loadPage();
    }
  });
  
  $scope.loadPage = function () {
    ticketService.getTicket(ticketId).then(
      function (ticket) {
        $scope.initPos(ticket);
      }
      ...
  }
  </code></pre>
  
  <p>Not as clean as I would have liked it, but certainly better than using $timeout...</p>