javascript - Angular data binding after ajax -

i have route like: /items/item/123/edit
, controller (one controller view , edit):

... if ($routeparams.id) {           $scope.itemid = $routeparams.id;           $scope.editmode = true;            item.getboxes({id: $routeparams.id}).$promise.then(function (data) {             $scope.data.boxid = [];              angular.foreach(data, function (obj) {               $scope.data.boxid.push(obj.id);               $scope.boxcache[obj.id] = {id: obj.id, name: {id: obj.id, name: obj.name}};             });              $scope.items= data;           });         } ... 

7 8 cases worked correctly doesn't bind data view. can't coll $scope.$apply() or $scope.$digest() because in progress

you can use $scope.$apply when if not in progress.

you can check if $digest in progress checking $scope.$$phase.

if(!$scope.$$phase) {   //$digest or $apply } 

use safe apply, this:

$rootscope.$$phase || $rootscope.$apply(); 

or method use service.

$timeout(function(),millisecond); 

you can use - $evalasync $evalasync([expression], [locals]);

check out --> https://docs.angularjs.org/api/ng/type/$rootscope.scope

choosing between $evalasync , $timeout depends on circumstance:

• if code queued using $evalasync directive, should run after dom has been manipulated angular, before browser renders.
• if code queued using $evalasync controller, should run before dom has been manipulated angular (and before browser renders) -- want this
• if code queued using $timeout, should run after dom has been manipulated angular, , after browser renders (which may cause flicker in cases)