$uibModalInstance.close not working

Question

I have the following code:

.service('loginModal', function($rootScope, $uibModal) {
      function updateUserData(user, data) {
        Object.keys(data).forEach(function(key) {
          user.facebook[key] = data[key];
        });
        return user.$update();

      }

      return function() {
          var instance = $uibModal.open({
                templateUrl: 'tpls/modals/login.html',
                controller: function($scope, $uibModalInstance, facebookService, UserService) {
                  function updateUserData(user, data) {
                    Object.keys(data).forEach(function(key) {
                      user.facebook[key] = data[key];
                    });
                    return user.$update();
                  }

                  $scope.login = function() {
                    facebookService.login().then(function(response) {
                      var authResponse = facebookService.getAuthResponse();
                      facebookService.api('/me').then(function(response) {
                        if (response && !response.error) {
                          response.picture = 'http://graph.facebook.com/' + response.id + '/picture?type=large';
                          UserService.query({
                            'facebook.id': response.id,
                            'facebook.token': authResponse.accessToken
                          }).$promise.then(function(results) {
                            response.token = {
                              value: authResponse.accessToken,
                              expiresIn: authResponse.expiresIn
                            };
                            if (results.length > 0)
                              updateUserData(results[0], response) //THIS DOES NOT FULFILL OR REJECT
                              .then($uibModalInstance.close, $uibModalInstance.dismiss);
                            else
                              UserService.save({
                                facebook: response,
                                local: {
                                  username: response.email || response.id,
                                  password: response.token.value
                                }
                              }).$promise
                              .then($uibModalInstance.close, $uibModalInstance.dismiss);
                          }, $uibModalInstance.dismiss);
                        } else {
                          $uibModalInstance.dismiss(response.error || response);
                        }
                      }, $uibModalInstance.dismiss);
                    }, $uibModalInstance.dismiss);
                  };
                }

                  instance.opened.then(function() {
                  $rootScope.openModals.push(instance);
                });

                function removeInstanceFromModalList() {
                  $rootScope.openModals.splice($rootScope.openModals.indexOf(instance), 1);
                }

                instance.result.then(removeInstanceFromModalList, removeInstanceFromModalList);
                return instance.result;
              }

Basically I'm calling loginModal().then(function(user){...},function(e){...}); from wherever I want.

The part which does not work however is right after I query UserService

if (results.length > 0)
  updateUserData(results[0], response) //THIS DOES NOT FULFILL OR REJECT
  .then($uibModalInstance.close, $uibModalInstance.dismiss);

I've also tried debugging like this:

updateUserData(results[0], response)
  .then(function(usr) {
    $uibModalInstance.close(usr); //debugger reaches this statement,
                                  //nothing happens
  }, function(e) {
    $uibModalInstance.dismiss(e);
  });

What's wrong with my code? only backdrop clicks seem to close the dialog.

Solution 1

Dangit - had a version issue.

Apperantly the version of angular-ui I was using was incompatible with angular#1.4.7 so I had to upgrade to 1.4.8.

Solution 2

You can use the promise returned by $uibModal.open() which has the close() method attached. You could store it in the controller $scope:

$scope.modal_instance = $uibModal.open({ ...

and then use:

$scope.modal_instance.close();

instead of $uibModalInstance.close.