title: Fix header plugin not working in Angular datatables
body: <p>I am using the stable build version Stable release v2.1.2 of the fixed header jquery <a href="http://datatables.net/download/#FixedHeader" rel="nofollow">plugin</a>. I am trying to fix my table header. I have created the table using Angular datatables as mentioned over <a href="http://l-lin.github.io/angular-datatables/#/angularWay" rel="nofollow">here</a>.</p>
  
  <p>In my controller class I have written the following code,</p>
  
  <pre><code>app.controller("SampleController", function ($scope) {
  
      $(document).ready( function () {
          var table = $('#example').DataTable();
          new $.fn.dataTable.FixedHeader( table );
      });
  
  });
  </code></pre>
  
  <p>My HTML is as follows,</p>
  
  <pre><code> &lt;table id="example" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" fix-header&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Name &lt;/th&gt;
                  &lt;/tr&gt;
                 &lt;/thead&gt;    
                &lt;tbody&gt; 
                     &lt;tr ng-repeat="item in items"&gt;
                          &lt;td&gt;{{item.name}} &lt;/td&gt;
                     &lt;/tr&gt;
                &lt;/tbody&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>However when i run my application, i get the following error,</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'childNodes' of undefined</p>
  </blockquote>
  
  <p>I also tried using the following directive as I am aware that DOM manipulations should not be done in Controller but I get the following error.</p>
  
  <blockquote>
    <p>TypeError: Cannot set property '_oPluginFixedHeader' of undefined</p>
  </blockquote>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>my directive</p>
  
  <pre><code>app.directive('fixHeader', function () {
      return {
          restrict: 'AE', //attribute or element
          replace: true,
          link: function ($scope, elem, attr) {
              $scope.table = elem.find("#example");  
              console.log($scope.table);
              var table= $scope.table.dataTable(); 
              new $.fn.dataTable.FixedHeader(table); 
          }
      };
  });
  </code></pre>
  
  <p>Please can someone suggest a better solution?</p>
  
  <p>I am using version <strong>2.1.2</strong> of <strong>dataTables.fixedHeader.js</strong> and my error comes in below line</p>
  
  <pre><code> var dt = $.fn.dataTable.Api ?
          new $.fn.dataTable.Api( mTable ).settings()[0] :
          mTable.fnSettings();
  
      dt._oPluginFixedHeader = this; //error over here
  </code></pre>