Ng-repeat did not update rows after manual manipulation?

Question

I have an ng-repeat working fine. I applied an x-editable that works fine too. There are many pages, paging is applied. I am using ng-table. Yet when some records are updated using jquery x-editabe (via its ajax method) then angularjs, ng-repeat stop updating that particular . Why?

 <td title="'Price'" data-type="number" my-x-editable data-sortable="'Price'" filter="
        {'Price':'text'}">{{product.Price}}
 </td>
  <td title="'Vendor'" data-sortable="'Vendor'" filter="{'Price':'text'}">
                    <a href="#" id="VendorID"  class ="xEditable" data-type="select" data-pk="{{product.ID}}" data-source='@Url.Action("ProductVendors")' data-value="{{product.Vendor.ID}}" data-url ="@Url.Action("UpdateAttributes")" title ="@Resources.OA_Attribute_Vendor">{{product.Vendor.Name}}</a>
  </td>

If I dont update using x-editable, everything keeps working fine. When I use x-editable that particular column do not get updated with ng-repeat when I go to next page.

Answer 1

For any changes done outside AngularJS(like DOM manipulations etc.) one needs to call $apply so that AngularJS can pick and reflect those changes on the view.

here is a useful link : http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Answer 2

You need to call $scope.$apply for Angular to know about changes made outside Angular's own context.