title: Using jqueryDataTables in Angular, getting childNodes error in Controller
body: <p>I'm using <a href="http://www.datatables.net/manual/installation" rel="nofollow noreferrer"><strong>jqueryDataTables</strong></a> to sort data in tables in my app.</p>
  
  <p>Rather then using a script tag on the page which it needs to be on, figured I could just include it inside of my Angular Controller code for that view, however I'm and getting a strange error.</p>
  
  <p>I've used a mix of jQuery before inside of Angular, so not sure why it's not working in this case.</p>
  
  <p>Error and code below:
  <strong>TypeError: Cannot read property 'childNodes' of undefined</strong>
  <img src="https://i.stack.imgur.com/6qLGo.png" alt="enter image description here"></p>
  
  <pre><code>// Controller for Manage Users
  app.controller('ManageUsersController', function($scope) {
  
      // Init
      $scope.status_dropdown = false;
      $scope.deactivate_btn = false;
  
      // Check all users:
      this.checkAll = function(target) {
          var checkboxes = document.getElementsByName('checkboxUser');
          var checkAll = document.getElementsByName('checkboxAll');
  
          for(var i=0, n=checkboxes.length;i&lt;n;i++) {
              checkboxes[i].checked = checkAll[0].checked;
          }
      };
  
      alert('1');
      $('#manage_users_table').DataTable();
      alert('2');
  });
  </code></pre>
  
  <p><strong>HTML during first alert message:</strong>
  <img src="https://i.stack.imgur.com/zYvyd.png" alt="enter image description here"><br/><br/></p>
  
  <p><strong>HTML during 2nd alert message, after <code>DataTable()</code> has been initialized:</strong>
  <img src="https://i.stack.imgur.com/zIhLi.png" alt="enter image description here"><br/><br/></p>
  
  <p>The alert pops up twice for each.<br/><br/></p>
  
  <p>HTML<br/>
  Gist: <a href="https://gist.github.com/leongaban/4f1de6bee8672b4177e5" rel="nofollow noreferrer">https://gist.github.com/leongaban/4f1de6bee8672b4177e5</a></p>
  
  <pre><code>&lt;div id="manage_content" class="page" ng-controller="ManageUsersController as manageUsers"&gt;
      &lt;table id="manage_users_table" width="100%"&gt;
          &lt;tr&gt;... hardcoded table data here
  
  
  
      &lt;!-- PRODUCTION SCRIPTS --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- DEVELOPMENT SCRIPTS --&gt;
      &lt;!-- Libs &amp; Vendors --&gt;
      &lt;script src="src/js/libs/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="src/js/libs/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="src/js/libs/jquery.dataTables.js"&gt;&lt;/script&gt;
      &lt;script src="src/js/vendors/modernizr.min.js"&gt;&lt;/script&gt;
      &lt;script src="src/js/vendors/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Modules --&gt;
      &lt;script src="src/js/modules/app.js"&gt;&lt;/script&gt;
      &lt;script src="src/js/modules/products.js"&gt;&lt;/script&gt;
      &lt;script src="src/js/modules/manage.js"&gt;&lt;/script&gt;
      &lt;script src="src/js/modules/profile.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>