Angular ng-show After Restangular API call

Question

I am having trouble getting a ng-show to update after making a Restangular api call. I have tried using $appply after getting the response from the api but I get a '$digest already in progress' error.

Restangular.one("registrants/" + $scope.registrant.id).customPUT($scope.registrant, "").then(function (response) {
        $scope.$apply(function () {
            $scope.registrant = response.registrant;
        });
});

and in the view

<span ng-show="registrant.checked_in">User is checked in</span>

<span ng-hide="registrant.checked_in">User is not checked in</span>

Any help is greatly appreciated!

Answer 1

I've made some simple changes that might solve your problem:

Restangular
  .one('registrants', $scope.registrant.id) // prepares base route /registrants/registrantId
  .customPUT($scope.registrant, '') // makes PUT on /registrants/registrantId with payload object $scope.registrant
  .then(function (response) {
    $scope.registrant = response.registrant;
  });

Make sure you check that the actual requests are made (network panel in chrome dev tools / firebug). Also, check that you really want to make a PUT rather than a PATCH:

Restangular
  .one('registrants', $scope.registrant.id) // prepares base route /registrants/registrantId
  .patch($scope.registrant) // makes PATCH on /registrants/registrantId with payload object $scope.registrant
  .then(function (response) {
    $scope.registrant = response.registrant;
  });

The $apply is not really needed since the callback is executed within a $rootScope.apply() whenever the XHR response is fully returned.

Answer 2

You can always work around the issue with:

<span>User is {{registrant.checked_in ? '' : 'not '}}checked in</span>

Or:

<span>User is <span ng-hide="registrant.checked_in">not</span> checked in</span>