TableSorter with Angularjs+bootstrap

Been trying to use the Jquery Table sorter along with Angular js+Boostrap framework. Now, on clicking any column for sorting, the entire width and structure of the table changes and a new row with the ng-repeat expressions are getting created.

Eg: All the js are included

<script>
$(document).ready(function()
{
    $("#check").tablesorter();
}
);
</script>

 <table id="check" class="table table-bordered table-striped table-condensed table-hover tablesorter" cellspacing="1">
     <thead>
           <tr>        
                <th class="header">Product Code#</th>
                <th class="header">Item Description#</th>
                  <th class="header">Unit Cost#</th>

    </tr>
     </thead>
      <tbody >
     <tr ng:repeat="i in itemresponse" >

        <td><a href="#/ItemSearch/{{i._ItemID}}" >{{i._ItemID}}</a></td>
        <td>{{i.PrimaryInformation._ShortDescription}}</td>
        <td>{{i.PrimaryInformation._UnitCost}}</td>

    </tr>