Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
var req = {
            "RequestId": $scope.$parent.req_id,
            "RequestDate": new Date(),
            "RequestDetails": $scope.$parent.details
        };

$scope.req_result = "test";

$.ajax({
            type: "POST",
            url: 'http://localhost:49358/api/myClasses/PostRequest',
            data: JSON.stringify(req),
            contentType: "application/json;charset=utf-8",
            processData: true,
            success: function (data, status, xhr) {
                console.log("The result is : " + status);
                $scope.req_result = "Post succeeded";
            },
            error: function (xhr) {
                $scope.req_result = "ERROR: " + xhr.responseText
            }
        });

The scope variable $scope.req_result does not get set so when I attempt to display it on the html view page:

<span>{{req_result}}</span>

it displays the default value. Somehow what ajax is doing is not known to angular

share|improve this question
    
are you sure the ajax callbacks are being reached? – paul trone 18 hours ago
1  
you should use $.ajax here, use $http instead, wouldn't make you bother to run digest cycle.. – Pankaj Parkar 18 hours ago
    
Does using $http have serious advantages? other then not having to run digest cycle? – ElenaDBA 18 hours ago
1  
Yes, look at the code below that uses $http. Angular internally does a lot of things that you are doing manually like setting content-type header, creating JSON from JavaScript object etc. Angular core itself comes with $http, so you might as well use it to your benefit. If Ajax is the only thing you are using jQuery for, you can go ahead and remove that dependency even. – Prashant Palikhe 18 hours ago
up vote 2 down vote accepted

You forgot to initiate the digest cycle by calling $scope.$apply() after you modify the scope variable from non-angular context.

success: function (data, status, xhr) {
    $scope.req_result = "Post succeeded";
    $scope.$apply();
},
error: function (xhr) {
    $scope.req_result = "ERROR: " + xhr.responseText
    $scope.$apply();
}

Angular does the magical view updates by creating something called "watchers". When you do {{ someScopeVariable }}, Angular is creating watcher for that scope variable. Just as when you programmatically create a watcher by doing

$scope.$watch('someScopeVariable', function myListenerFunction() {
    // When someScopeVariable changes, do this
});

Watchers go hand-in-hand with something called digest cycle. From different places within Angular, e.g. $timeout callback, or $http.then() callback etc., Angular invokes the digest cycle from the $rootScope. This is basically going through all the watchers in the scope and if the value being watched has changed, invoke the listener function like the myListenerFunction above.

Important thing is Angular is triggering this digest cycle internally. So, when you use $.ajax() from jQuery, you are missing this. You change the scope variable that are being watched because you did

{{req_result}}

but, no watchers know about it. $scope.$apply() makes sure all the watchers know about this change by initiating a digest cycle from the root scope.

BUT

A better solution to your issue would be to use Angular's internal $http service which can be used to make XHR request and Angular automatically triggers digest cycle when you callback functions are invoked.

var req = {
            "RequestId": $scope.$parent.req_id,
            "RequestDate": new Date(),
            "RequestDetails": $scope.$parent.details
        };

$scope.req_result = "test";

$http
    .post('http://localhost:49358/api/myClasses/PostRequest', req)
    .then(
        function () {
            $scope.req_result = "Post succeeded";
        }, 
        function () {
            $scope.req_result = "ERROR";
        }
    );
share|improve this answer
    
Thanks! Worked like a charm – ElenaDBA 18 hours ago
    
Please read the edit to understand why it worked and what is the better solution. – Prashant Palikhe 18 hours ago
    
Wanted to thank you again for such a detailed answer – ElenaDBA 17 hours ago
    
You are welcome :) – Prashant Palikhe 17 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.