How can i use ajax with angularJS?

Question

I am trying to use ajax in jquery to submit a form data instead of the $HTTP service in angularJS so i can send files with the form data as well , the issue is that upon success or error i can not perform other operations like showing or hiding elements (ng-show) , there is also one more thing , i have the form data in an object called (newSubscriberInfo) , is there is a way to send the data through ajax call as so ($scope.newSubscriberInfo) instead of passing to the Ajax call an object contains the form elements (var formData = new FormData($('#newSubscriberForm')[0]))??? . here is the code

$scope.saveSubscriber = function (id) {
    if(saveStatus === 'New'){
        $http.post('subscribers/add',$scope.newSubscriberInfo)
        .success(function (data,success) {
            $scope.newSubscriberInfo.serial_number = parseInt(data);
            $scope.subscribers.unshift($scope.newSubscriberInfo);
            $scope.newSubscriberForm = false;
            $scope.newSubscriberInfo = {};
        })
        .error(function (data,error) {
            $scope.connectError = true;
        });
    } else {
        var formData = new FormData($('#newSubscriberForm')[0]);
        console.log(formData);
        $.ajax({
            url: 'subscribers/'+id+'/update',
            type: 'POST',
            data: formData,
            cache: false,
            success : function (data) {
                console.log(data);
                $scope.newSubscriberForm = false;
                $scope.newSubscriberInfo = {};
            },
            error : function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(errorThrown);
                $scope.connectError = true;
            },
            contentType: false,
            processData: false
        });
    }
}

Answer 1

you can use angular-file-upload module to do the file transfer, which does allow transfer of form-data as well along with the files.

see the example here on how to do file-upload-with-form-data

Answer 2

If you do things outside of angular and want to update the scope you need to wrap them in $scope.$apply:

$.ajax({ ... })
    .success(function() {
        $scope.$apply(function() {
            // do stuff
        })

    });

See here for more details

Answer 3

Your async response is not in the angular world. To make it you can either use $scope.$apply inside your callbacks, or better yet wrap the jQuery promise in an angular promise. Something like this:

    $q.when($.ajax({
        url: 'subscribers/'+id+'/update',
        type: 'POST',
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    })).then(function (data) {
            console.log(data);
            $scope.newSubscriberForm = false;
            $scope.newSubscriberInfo = {};
        },
        function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(errorThrown);
            $scope.connectError = true;
        });