Changing AngularJS scope variables from an inside function

Question

Hie I am new to Angular and I'm trying to change (or set) the scope variables from a function that is inside a controller. Here is my code:

$.ajax({
        type: "POST",
        url: URL,
        data: param = "",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: successFunc,
        error: errorFunc
    });

    function successFunc(data, status) {
            $scope.modalStatus = 'success';
            $scope.modalIcon = 'check';
            $scope.modalMessage = 'Invoice Saved!';
            showNotification();
    }

    function errorFunc() {
        alert('error');
    }

$scope.modalStatus, $scope.modalIcon and $scope.modalMessage are the scope variables that were set earlier at the beginning of the controller. How do I change them in that successFunc method, please help.

Possible duplicate of [Why angular data-binding not working with jquery ajax?](http://stackoverflow.com/questions/34718686/why-angular-data-binding-not-working-with-jquery-ajax) — Alon Eitan, Jan 31 '16 at 00:30
Angular provides a `$http` service to do ajax calls. You would be far better off using that instead of jQuery. — Rhumborl, Jan 31 '16 at 00:34
@EMahaso You're welcome, FYI - what @Rhumborl wrote is the best solution for this, don't just jQuery's ajax, use angular's `$http` instead — Alon Eitan, Jan 31 '16 at 00:37

score 4 · Accepted Answer · answered Jan 31 '16 at 00:35

Change your success callback:

function successFunc(data, status) {
  $scope.modalStatus = 'success';
  $scope.modalIcon = 'check';
  $scope.modalMessage = 'Invoice Saved!';
  showNotification();
  $scope.$apply();
}

Also it's a bad practise to use jQuery and Angular in one application. Angular provides $http fo requests.

score 0 · Answer 2 · answered Jan 31 '16 at 00:49

Why use Jquery $ajax while AngularJs provides $http.

Actually, there is an internal mechanism in AngularJs to apply changes, call it $digest. When you use JQuery, it is beyond angularJs scope and it does not apply $digest mechanism.

so in this case manually apply $digest by using following apply method inside successFunc function.

$scope.$apply(function() {
  $scope.modalStatus = 'success';
  $scope.modalIcon = 'check';
  $scope.modalMessage = 'Invoice Saved!';
});

this link may help you understanding more about $apply and $digest http://www.panda-os.com/2015/01/angularjs-apply-digest-and-evalasync/#.Vq1Z2lN95R0

Changing AngularJS scope variables from an inside function

2 Answers2

Linked