title: ng-repeat sorting arrow not working in javascript datatables
body: <p>I'm very new to AngularJs and datatables.
  I have a requirement to populate the data in table rows using ng-repeat.
  Iam able to populate the rows and enabling the sorting for the first time.
  When i click on the arrows to sort ascend or descend the row data wiping off.</p>
  
  <p>Here is my table data</p>
  
  <pre><code>&lt;table datatable="ng" id="example" class="display" cellspacing="0"    width="100%"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th class="col1"&gt;Campaign Name&lt;/th&gt;
                          &lt;th class="col4"&gt;Description&lt;/th&gt;
                          &lt;th class="col5"&gt;Activate/Deactivate&lt;/th&gt;
                          &lt;th class="col5"&gt;edit&lt;/th&gt;
                          &lt;!-- &lt;th class="col5"&gt;status&lt;/th&gt; --&gt;
                          &lt;!-- &lt;th class="col5"&gt;Details&lt;/th&gt; --&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody &gt;
                      &lt;tr ng-repeat="campaign in campaignListData"&gt;
                               &lt;td&gt;{{campaign.campaignObject.campaignName}}&lt;/td&gt;
                               &lt;td&gt;{{campaign.campaignObject.campaignMessage}}&lt;/td&gt;
                              &lt;td&gt;&lt;button type="button" class="pay-amount pending" style="margin-top:-10px;margin-right:17px;width:128px;height:34px"
                              value = "{{ campaign.campaignObject.label }}" title="ACTIVATE" ng-click="updateCampaignStatus(campaign.campaignObject.id)"&gt;
                                  &lt;span style="margin-left:-10px;margin-right:17px;width:128px;height:34px"&gt;{{ campaign.campaignObject.label }}&lt;/span&gt;
                                  &lt;/button&gt;
                              &lt;/td&gt;
                              &lt;td&gt;&lt;a href="&lt;c:url value="${contextPath}/merchant/manageCampaign/editCampaignConfiguration"/&gt;?campaignId={{ campaign.campaignObject.id }}"&gt;
                                  &lt;img class="tableImage" style="margin-left:-8px;margin-top:-10px;" src="&lt;c:url value="/resources/images/setting.png" /&gt;" &gt;&lt;/a&gt;
                              &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt; 
  </code></pre>
  
  <p>Here is my sorting javascript code</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $("#noCampaignData").hide();
          //$("#example_paginate").hide();
          var rowCount = $("#example tr").length;
          console.log("Row count value is"+rowCount);
          if (rowCount &gt;= 0) {
              console.log("Entered into Sorting");
              $("#example").dataTable({
                  "pagingType" : "full_numbers",
                  "order" : [ [ 2, "desc" ] ]
              });
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm getting rowcount for tr is 1</p>
  
  <p>I have the js file included at the bottom of the page</p>
  
  <pre><code>&lt;script src="&lt;c:url value="/resources/js/CampaignListController.js" /&gt;"&gt;&lt;/script&gt;
  &lt;script src="&lt;c:url value="/resources/js/jquery.dataTables.min.js" /&gt;"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>When Im loading data its fine loading with ng-repeat. But when i click on header to sort ascending or descending, rows are wiped off.</p>
  
  <p>Please advise me where i'm doing wrong?
  I'm unable to sort the data ascending, descending and pagination is not at all working.</p>
  
  <p>Sorry for my English.</p>