Using Kinvey.Social to login with an Angular App and Promise API

Question

I've been using the Kinvey HTML5 library to try to build a client-side app that uses Google identities for Login. Everything seems to be fine as far as the Oauth transaction is concerned, but I'm trying to toggle the visibility of my login button using a scope parameter and within the callback to the Kinvey connect method, Angular doesn't seem to be detecting the change.

The service:

  connect: function(successFn, failureFn) {
    return Kinvey.Social.connect(null, 'google',
      {
        success: successFn,
        failure: failureFn
      });
  }

The directive for the login link:

    $scope.login = function() {
      Login
        .connect(function(response) {
          $scope.loggedIn = true;
        },
        function(response) {
        });
    }

And the directive template:

<div>
  <button ng-hide="loggedIn" type="button" class="btn" ng-click="login()">Login with Google ({{loggedIn}})</button>
  <div class="btn-group btn-small" ng-show="loggedIn">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
      Hello, {{user.socialData.name}} <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="/profile">My Profile</a></li>
      <li><a href="/performance">My Performance</a></li>
      <li class="divider"></li>
      <li><a href="/logout" ng-click="logout()">Log Out</a></li>
    </ul>
 </div>
</div>

The goal is to toggle the visibility of the login button vs. the visibility of the drop down. I see no reason why what I'm doing shouldn't work. Even using $timeout to simulate the changing of the loggedIn value produces the correct behavior.

Answer 1

Angular needs to be notified when the external Kinvey.Social service returns so it can trigger a $digest cycle. This can be done with the $apply() function of $scope

$scope.login = function() {
  Login
    .connect(function(response) {
      $scope.$apply(function() { $scope.loggedIn = true; });
    },
    function(response) {
    });
}

When using angular's own $http service it handles this for you but when using something external this is how angular knows to run a dirty check cycle which should trigger the ng-show directive you're using.