Toaster doesn't appear after ajax returns success

Question

I am new to the angularjs and web development in general. I have an ajax request that sends some information to the server after a button click. When the request returns success, I want to show a toast that will say that the request was sent successfully. However that toast never pops, but I do have a console log that does prints that the request was sent. Why the toast doesn't pop?

Note: When I try to show the toast outside the success function of the ajax call, it does work.

Thanks in advance.

Here is my code:

(function() {
    'use strict';

    angular
        .module('app.dashboard')
        .controller('NotificationController', NotificationController);

    NotificationController.$inject = ['$resource', '$http', '$state','toaster'];
    function NotificationController($resource, $http, $state, toaster) {
        var vm = this;

        activate();


        vm.alertSubmit  = function() {
            console.log(vm.subject);
            console.log(vm.htmlContent);

            const item = {

                'subject':vm.subject,
                'body': vm.htmlContent
            };

            //toaster.pop(vm.toaster.type, vm.toaster.title, vm.toaster.text); If I try this line the toast does appear.

            //console.log(item);
            //console.log(JSON.stringify(item));
            $.ajax({
                type: 'POST',
                accepts: 'application/json',
                url: 'api/pushnotification',
                contentType: 'application/json',
                data: JSON.stringify(item),
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                    toaster.pop(vm.toaster.type, "Failure", "Message wasn't send.");
                },
                success: function (result) {
                    console.log(result);
                    toaster.pop(vm.toaster.type, vm.toaster.title, vm.toaster.text);
                }
            });
            return false;
        };

        function activate() {
          // the following allow to request array $resource instead of object (default)

            $http
                .get('api/auth')
                .then(function(response) {
                    // assumes if ok, response is an object with some data, if not, a string with error
                    // customize according to your api                
                    if (!response.data) {
                        $state.go('page.login');
                    }
                    else
                    {
                        var actions = {'get': {method: 'GET', isArray: true}};
                        vm.toaster = {
                            type: 'success',
                            title: 'Success',
                            text: 'Message was sent successfully.'
                        };

                        //vm.pop = function () {
                        //    toaster.pop(vm.toaster.type, vm.toaster.title, vm.toaster.text);
                        //};

                    }
                }, function() {
                    $state.go('page.login');
                });         
                console.log("activate func"); 
        }
    }
})();

Answer 1

As rightly suggested by @georgeawg, you can make use of the $http service:

$http.post('/someUrl', data, config).then(successCallback, errorCallback);

And modify your code as:

$http.post({
      'api/pushnotification', // Post URL
       JSON.stringify(item),  // Data to be sent
       contentType: 'application/json' // Header Config
}).then(
        // successCallback
        function (result) {
            console.log(result);
            toaster.pop(vm.toaster.type, vm.toaster.title, vm.toaster.text);
        },

        // errorCallback
        function (errorThrown) {
            alert(errorThrown);
            toaster.pop(vm.toaster.type, "Failure", "Message wasn't send.");
        },
);

instead of your code:

$.ajax({
            type: 'POST',
            accepts: 'application/json',
            url: 'api/pushnotification',
            contentType: 'application/json',
            data: JSON.stringify(item),
            error: function (jqXHR, textStatus, errorThrown) {
                alert(errorThrown);
                toaster.pop(vm.toaster.type, "Failure", "Message wasn't send.");
            },
            success: function (result) {
                console.log(result);
                toaster.pop(vm.toaster.type, vm.toaster.title, vm.toaster.text);
            }
        });