Issue with angular animation and undefined javascript values

Question

I am trying to get an angular animation to be triggered upon an unsuccessful login (either when the server sends a 4xx (e.g. 403) or when no credentials are provided).

Here is the controller:

 .controller('SigninCtrl', ['$scope', '$rootScope', '$cookies', '$state', '$animate', 'signinService', function ($scope, $rootScope, $cookies, $state, $animate, signinService) {
        $scope.signin = function () {
            $scope.shake = false;
            if ($scope.credentials) {
                signinService.signin($scope.credentials, function (status, memberRole) {
                        $scope.shake = false;
                        //TODO: necessary to check status?
                        if (status === 200) {
                           ...
                        }
                    },
                    function () {
                        $scope.shake = true;
                    });
            }
            else {
                //TODO: only shakes/works once!
                $scope.shake = true;
            }
        }
    }]);

The form:

<form class="form-signin" ng-class="{shake: shake}" name="signinForm" ng-submit="signin()" novalidate>
    <h2 class="form-signin-heading signin-title">{{'SIGNIN' | translate}}</h2>
    <input type="email" ng-required name="username" ng-model="credentials.username" class="form-control" placeholder="{{'SIGNIN_FORM_EMAIL'| translate}}"/>
    <input type="password" ng-required name="password" ng-model="credentials.password" class="form-control" placeholder="{{'SIGNIN_FORM_PASSWORD'| translate}}"/>
    <button class="btn btn-lg btn-primary btn-block" type="submit">{{'SIGNIN' | translate}}</button>
    <div class="forgot-password">
        <a ui-sref="sendpasswordresetinformation">{{'SIGNIN_FORM_FORGOTTEN_PASSWORD' | translate}}</a>
    </div>
</form>

However, if the form has no credentials in the inputs (nothing as in not even the empty string) the form shakes only once.

Can someone please help?

edit 1:

  .factory('signinService', ['$http', function ($http) {
        return {
            signin: function (credentials, successCallback, errorCallback) {

                var transform = function (data) {
                    return $.param(data);
                }

                return $http.post('/api/signin', credentials, {
                    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                    transformRequest: transform
                }).success(function (data, status, headers) {
                    if (status === 200) {
                        successCallback(status, headers('MEMBER_ROLE'));
                    }
                    else {
                        console.log('auth error');
                        successCallback('error');
                    }
                }).error(function(data, status, headers) {
                    console.log("error!", data, status, headers);
                    errorCallback();
                });
            }
        }
    }]);

Changing the controller to :

...
$scope.signin = function () {
            $scope.shake = false;
            $scope.$apply();//ADDED!
            ...

fixed the issue. Thanks floribon...