DOM manipulation in an AngularJS directive

I serve my AngularJS files from my NodeJS web server. So the external template in this directive is also served from there.

If we need to serve simple content from another web server and manipulate the DOM in a directive to render it appropriately, we can use a directive like this. I am able to manipulate the DOM and also change the innerText of td tags.

directive("testdirective", function(){
 return {
   restrict: "E",
   transclude: true,
   scope: {
     title: "@"
   },
   templateUrl: "/test.html",
   
   link: function(scope, element, attrs){
        
        console.log( document.querySelector('#documents_forms')) ;
        
        var table = angular.element( document.querySelector( '#documents_forms' ) );
        
        var tbodies = element.find('tbody');
        
        var columntext = [];
        
        for( var i = 0; i < tbodies.length; i ++ ){

          var tr = tbodies[i];

          var tds = $(tr).find('td');

          var text = [];

          var documentname;

          for( var y = 0; y &amp;amp;amp;lt; tds.length; y ++ ){

            tds[y].innerText = 'Test';

            documentname = tds[y].innerText;

            text.push( documentname );
          }
          columntext.push( text )
        }
        console.log( columntext );
   }
 };
})