AngularJS Toaster does not show on callback

Question

I'm using AngularJS Toaster to show toast messages. But i can't seem to get it working with a result from a callback, and i REALLY don't know why.

I've created a service for Toaster:

service.factory('$toasterservice', ['toaster',
    function (toaster) {
        return {
            'show': function (type, title, text) {
                return toaster.pop({
                    type: type,
                    title: title,
                    body: text,
                    showCloseButton: false
                });
            }
        };
    }]);

This piece of code is in my controller:

$scope.submit = function (db) {

            var params = {
                username: db.credentials.username,
                password: db.credentials.password,
                database: db.name,
                hostname: db.host,
                port: db.port
            };

            $dbservice.testConnection(params, function (response) {
                if (response.error)
                {
                    console.log(response.error)
                }
                else
                {
                    console.log('correct!');                    
                }
            });

        };

whenever i put this line of code:

$toasterservice.show('error', 'TITLE', 'BODY');

within controller level scope, it works perfectly fine.

When ever i try to use it in:

$dbservice.testConnection(params, function (response) {
             //HERE $toasterservice.show('error', 'TITLE', 'BODY');
            });

it doesn't work, how can i solve this? i can't seem to understand why this is happening.

$dbservice :

service.factory('$dbservice', ['$constants',
function ($constants) {

    return {
        'testConnection': function (params, callback) {               

            $.ajax({
                url: $constants.URL_TEST_CONNECTION,
                dataType: 'json',
                type: 'post',
                contentType: 'application/x-www-form-urlencoded',
                data: params,
                success: callback,
                error: callback
            });
        }
    };
}]);

Answer 1

The problem is using $.ajax and you should switch to using $http .

Any events that occur outside of angular core that change the scope need to notify angular so it can run digest in view.

You can call $scope.$apply() in the callback of your $.ajax to run digest