javascript - Using $watch, table div dissapear -

i'm using isteven-multi-select directive multi-select dropdown. i'm giving thingslist , creates checkedlist while choose things.

so @ first used button confirm selection , ng-click triggered postfunction checkedlist. , worked fine.

but decided add watcher wouldn't need press button. can see @ debug mode it's working (list updates correctly), there problem. i'm showing updated list @ page datatables. somehow, after choosing @ dropdown ($watch event) <div> table dissapearing. , it'not ng-show or dissapears dom itself.

i have no idea why.

this.postthings = function (checkedlist) {         $http.post("/list/" json.stringify(checkedlist)).then(             function success(response) {                 $scope.thingslist.splice(0);                    array.prototype.push.apply($scope.thingslist, response.data);             },             function error(data) {                 console.log(data);                 $.notify({message: data.data.message}, {type: 'danger'});             }         );     };   $scope.$watch(function (scope) {             return scope.checkedlist         },         function (newvalue, oldvalue) {             if ($scope.checkedlist.length == 0) {                 vm.bindback();             } else {                 vm.bindnew($scope.checkedlist);             }         }); 

directive:

<isteven-multi-select input-model="thingslist"                           output-model="checkedlist"                           button button-label="icon name"                           item-label="icon name maker"                           tick-property="check"> </isteven-multi-select> 

html dissapears:

        ...         <div class="table-responsive">             <h3>things:/h3>             <table datatable="ng" class="display">                 <thead>                 <tr>                     <th>id</th>                     <th>name</th>                 </tr>                 </thead>                 <tbody>                 <tr ng-repeat="thing in thingslist">                     <td>{{thing .id}}</td>                     <td><a ui-sref="thing info({thing id: thing .id})">{{thing .name}}</a></td>                 </tr>                 </tbody>             </table>         </div>         ... 

found problem. there's known bug in angular-datatables, multiple rerenderings somehow erase < table > dom. https://github.com/l-lin/angular-datatables/issues/729

so idea stop constant rerendering, not trigger bug.

for me solution was, add checking if newvalue has different length oldvalue. there's no constant rerender , works fine.

$scope.$watch(function (scope) {         return scope.checkedlist     },     function (newvalue, oldvalue) {      if(newvalue.length != oldvalue.length) {         if ($scope.checkedlist.length == 0) {             vm.bindback();         } else {             vm.bindnew($scope.checkedlist);         }      }     });