not updating view after Ajax call in AngularJS?

Question

I am calling get method but the view is not updated. I tried alert() and it shows data properly.

var app = angular.module('test', []);

app.controller('TestCtrl', function ($scope) 
{
    $.get( "people/allNumberOfuser", function( data )
    {
        $scope.testValue =data.message;
        alert(data.message);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="test">
    <p ng-controller="TestCtrl">
        {{testValue}}
    </p>
</div>

I am new in AngularJS. Thanks in advance.

Use AngularJS's `$http` service for the HTTP calls. Please read more about it [here](https://docs.angularjs.org/api/ng/service/$http). And for starters, consider not using jQuery in AngularJS. — 31piy, Dec 11 '19 at 09:03
Does this answer your question? [The view is not updated when the model updates in AngularJS](https://stackoverflow.com/questions/14374440/the-view-is-not-updated-when-the-model-updates-in-angularjs) — Jayakumar Thangavel, Dec 11 '19 at 09:06

Mohammad Ali Rony · Accepted Answer · 2019-12-11T09:08:59.473

JQuery get callback method does not detect by angular because it outside of angular so need to inform angular of any update using $scope.$apply()

var app = angular.module('test', []);

app.controller('TestCtrl', function ($scope) 
{
   jQuery.get( "/People/GetNumberOfUser", function( data )
   {
       $scope.testValue =data.message;
       $scope.$apply() ;
       alert(data.message);
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="test">
<p ng-controller="TestCtrl">
{{testValue}}
</p>
</div>

you can use angular $http instead of jquery then no need $scope.$apply()

var app = angular.module('test', []);

app.controller('TestCtrl', function ($scope) 
{
    $http({
      method: 'POST',
      url: '/People/GetNumberOfUser'
    }, function( data )
    {
       $scope.testValue =data.message;
       alert(data.message);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="test">
<p ng-controller="TestCtrl">
{{testValue}}
</p>
</div>

@31piy Thanks, i have update my coding using `$http` service — Mohammad Ali Rony, Dec 11 '19 at 09:09

not updating view after Ajax call in AngularJS?

1 Answers1