Using a w2grid in an ngDialog

Question

We're trying to understand why using a w2grid (w2.com) in a popup ngDialog (likeastore.github.io/ngDialog) requires different code than when using one in a normal page. We're using Angular 1.4.8.

In the normal page HTML, we reserve a div for the w2grid inside a div specifying a controller:

<div data-ng-controller="CtrlViewEdit" >
  <div id="gridViewEdit" style="width:1500px; height:800px; display:none;" ></div>
</div>

In the CtrlViewEdit controller constructor function, we find the div and construct a w2grid on it:

$('#gridViewEdit').w2grid({name:'gridViewEdit', ...etc

This works fine. The page comes up with the grid on it.

Elsewhere, we want to pop up a modal dialog with a grid on it. The template for the dialog similarly has a div for the grid inside a div for the dialog's controller:

<div data-ng-controller="PopupSelectRetailer" >
  <input ng-model="searchName" />

  <div id="gridSelectRetailer" style="width:750px; height:500px; display:block;" ></div>

  <br /><br />
  {{searchName}}

  <div class="ngdialog-buttons">
    <button type="button" class="ngdialog-button ngdialog-button-secondary" ng-click="closeThisDialog(0)">Close</button>
  </div>

</div>

This template (PopupSelectRetailer.html) is passed to ngDialog.open in code like this:

  var myScope = $scope.$new();

  ngDialog.open(
  {
    width: 1000,
    template: "PopupSelectRetailer.html",
    className: 'ngdialog-theme-default',
    closeByDocument:false,
    showClose: false,
    scope: myScope
  });

If, similar to the above, the controller for the dialog (PopupSelectRetailer) simply does this:

$('#gridSelectRetailer').w2grid({name: 'gridSelectRetailer', ...etc

the dialog appears without a grid in it. To actually make it work, we have to defer creation of the w2grid in the dialog until after the ngDialog has been opened, like so in the controller:

$scope.$on('ngDialog.opened', InitializeNonAngular);

  function InitializeNonAngular() 
  {
    $('#gridSelectRetailer').w2grid({name: 'gridSelectRetailer', ...etc

Our question is "why?" Why is there a difference between Angular loading a template normally, as vs. within ngDialog?

It looks to us like in the normal case the div reserved for the grid is in the DOM at the time the controller constructor runs, so jquery can, at that time, find it and replace it with the w2grid.

Whereas, in the ngDialog case, it seems as if the controller constructor runs before the div reserved for the grid is in the DOM, hence there's nothing for jquery to find and replace with a w2grid. Instead we have to wait until ngDialog.open is done, by which time the template has been fully loaded.

Yet, in the ngDialog case, the template has at least been partially loaded else the controller constructor wouldn't be running at all - the only place it's specified is in the template!

What explains this difference in the order of operations? Is this something one simply has to "know" about ngDialog, or is there a broader principle at play?