I have an issue where the the nesting of appended directives is not working correctly. query-row is a directive (with an HTML template) and I want to have the following DOM structure 

Desired Outcome

```
<query-row></query-row>
<query-row></query-row>
<query-row></query-row>
etc...

```

But what I get is this. Also see screenshot

```
<query-row>
   <query-row></query-row>
   <query-row></query-row>
   etc...
</query-row>

```

[![enter image description here](https://i.stack.imgur.com/xgwKa.png)](https://i.stack.imgur.com/xgwKa.png)

Javascript code. As you can see here, in the controller I'm creating an element called query-row and then I'm appending it to the prior query-row...but here is where my logic is faulty because it's not appending, but rather nesting in the first query-row.

```
angular.module('app', ['ngAnimate', 'ui.bootstrap'])
  .controller('queryBuilderCtrl', ['$scope', '$compile', function($scope, $compile) {

    $scope.add = function() {
      var queryRow = angular.element(document.createElement('query-row'))
      $compile(queryRow)($scope)
      angular.element('query-row').append(queryRow)
    }
  }])
  .directive('queryBuilder', function() {
    return {
      restrict: 'E',
      templateUrl: 'queryBuilderTemplate.html',
      link: function(scope, elem, attrs) {

      }
    }
  }).directive('queryRow', function() {
    return {
      restrict: 'EA',
      templateUrl: 'queryRowTemplate.html',
      link: function(scope, elem, attrs) {

      }
    }
  });

```

Here is a plnkr <http://plnkr.co/edit/1WAgBCEbyk7Tz3fLKnnW>