title: Angular is rendering directive outside of table
body: <p>We are using Angular 1.3.15
  I have an element directive like</p>
  
  <pre><code>(function () {
      var controller = function ($scope, $timeout) {
          this.$timeout = $timeout;
          $scope.$watch("vm.spinning", this.throttle.bind(this));
      };
  
      controller.prototype = {
          throttle: function (spinning, oldValue) {
              if (spinning === oldValue) return;
  
              this.$timeout.cancel(this.timeout);
              if (spinning) {
                  this.timeout = this.$timeout(this.setSpinning.bind(this), 100);
              } else {
                  this.setSpinning();
              }
          },
          setSpinning: function() {
              this.spinningThrottled = this.spinning;
          }
      };
  
      myapp.controller("SpinnerController", ["$scope", "$timeout", controller]);
  
      myapp.directive("spinner", function () {
          return {
              restrict: "E",
              scope: {
                  spinning: "=",
              },
              replace: true,
              controller: "SpinnerController",
              controllerAs: 'vm',
              bindToController: true,
              templateUrl: "Views_App/Components/Spinner.html"
          };
      });
  
      myapp.directive("spinnerGrid", function () {
          return {
              restrict: "E",
              scope: {
                  spinning: "=",
              },
              replace: true,
              controller: "SpinnerController",
              controllerAs: 'vm',
              bindToController: true,
              templateUrl: "Views_App/Components/SpinnerGrid.html"
          };
      });
  })();
  </code></pre>
  
  <p>The spinner grid template</p>
  
  <pre><code>&lt;tr data-ng-if="vm.spinningThrottled"&gt;
      &lt;td colspan="100"&gt;
              &lt;i class="fa fa-spinner fa-spin"&gt;&lt;/i&gt; Please wait...
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Usage</p>
  
  <pre><code>&lt;table&gt;
     &lt;thead&gt;...&lt;/thead&gt;
     &lt;tbody&gt;
        &lt;spinner-grid spinning="searching"&gt;&lt;/spinner-grid&gt;
        &lt;tr ng-repeat="..."&gt;..&lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>For somereason the content of the directive is moved outside of the table?</p>
  
  <p>edit: The question might be a duplicate, but K.Toress answer is not since it utilizes EA restriction</p>