Manually call $scope.$apply raise error on ajax call - Error: [$rootScope:inprog]

Question

I tried to use Angular Material md-autocomplete, the suggestion list was retrieved from Service Host via Ajax Call. Because of Delaying response, the $scope variable was not updating the UI Properly, it updates only is there is any event occur in the specific control. For Example Focus Sent Out and again Click the Control, then it updates the UI with the new value.

My Exact issue snapshot is posted in md-items is not updating the suggesion list properly in md-autocomplete Angular Material

After a long time of google I got a theoretical solution is $scope.$apply() - reference got from Angular controller scope not updating after jQuery ajax call

But I got an error Error: [$rootScope:inprog]... Kindly assist me how to fix the error

The Complete Sample Source Code:

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Person to Select:</p>

<md-autocomplete
          ng-disabled="isDisabled"
          md-no-cache="noCache"
          md-selected-item="selectedItem"
          md-search-text-change="searchTextChange()"
          md-search-text="searchText"
          md-selected-item-change="selectedItemChange(item)"
          md-items="item in Person"
          md-item-text="item.Name"
          md-min-length="0"
          placeholder="Which is your favorite Person?">
        <md-item-template>
          <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.Name}} - {{item.City}}</span>
        </md-item-template>
        <md-not-found>
          No Person matching "{{searchText}}" were found.
        </md-not-found>
      </md-autocomplete>
      <br/>
</div>

<script>
    var app = angular.module('myApp', ['ngMaterial']);

    app.controller('myCtrl', function ($scope, $http, $q) {

        $scope.searchText = "";
        $scope.Person = [];
        $scope.selectedItem = [];
        $scope.isDisabled = false;
        $scope.noCache = false;

        $scope.selectedItemChange = function (item) {
            alert("Item Changed");
        }
        $scope.searchTextChange = function () {

            $http({
                method: "GET",
                url: "http://www.w3schools.com/angular/customers_mysql.php",
                params: {
                    uid: $scope.searchText
                }
            })
            .then(function (response) {
                $scope.$apply(function () {
                    $scope.Person = response.data.records;
                });
            });
        }

    });
</script>
</body>
</html>

actually I'm using localhost for ajax call, Here I mentioned the sample Ajax URL is http://www.w3schools.com/angular/customers_mysql.php for your reference to get data.

Note: I need to use the $scope.$apply() within the Ajax Call without an error Error: [$rootScope:inprog]...

Kindly assist me... how to fix.

The Snapshot of Browser

@MartijnWelker is right. Your Question #35624977 is an asynchronous issue. (Values can't be returned before a promise is resolved.) $apply() won't fix that problem. — georgeawg
– georgeawg, Commented Feb 26, 2016 at 11:31
Accept the answer from @MartijnWelker and write a new question that describes what you are actually trying to accomplish, include the desired behavior, a summary of the work you've done so far to solve the problem, and a description of the difficulty you are having solving it. — georgeawg
– georgeawg, Commented Feb 26, 2016 at 13:00
@georgeawg I'm creating a new question. Once post is done, then I close this question by accepting his answer. — B.Balamanigandan
– B.Balamanigandan, Commented Feb 26, 2016 at 13:02
@georgeawg I posted a new question stackoverflow.com/questions/35652828/… which describes the issue details with my trial and error attempt history. — B.Balamanigandan
– B.Balamanigandan, Commented Feb 26, 2016 at 13:20

Martijn Welker · Accepted Answer · 2016-02-26 07:43:56Z

2

$scope.$apply is automatically called by Angular when you use a $ function, so you don't have to call it yourself, the reason your UI isn't updating must be somewhere else.

answered Feb 26, 2016 at 7:43

Martijn Welker

5,6151 gold badge19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

B.Balamanigandan Over a year ago

Then how to update the new values in the autocomplete list? In the Post stackoverflow.com/questions/21127709/… - they are suggesting to call $scope.$apply() manually to update the UI.

Martijn Welker Over a year ago

He has to use $apply() because he is using jQuery's $.post, you don't have to because you're using Angular's $http

Martijn Welker Over a year ago

Make a new question regarding that exact issue with details, this one is answered.

B.Balamanigandan Over a year ago

Kindly visit the post stackoverflow.com/questions/35624977/… here I posted the screen shot with issues using actual data.

georgeawg Over a year ago

@MartijnWelker is right. Your Question #35624977 is an asynchronous issue. (Values can't be returned before a promise is resolved.) $apply() won't fix that problem.

Slytherin · Accepted Answer · 2016-02-26 08:22:50Z

1

If that is the way you need to do it,try the $scope.$applyAsync

Documentation here.

answered Feb 26, 2016 at 8:22

Slytherin

4743 silver badges17 bronze badges

Comments

Vinay · Accepted Answer · 2016-02-26 10:40:19Z

1

Angular usually calls the $digest, $watch internally to bind the scope variable.

In your case, You have to manually invoke any of the event listeners to bind the data value.

Try using $watch or $apply in your scope variable

function Ctrl($scope) {
  $scope.messageToUser = "You are done!";

    setTimeout(function () {
        $scope.$apply(function () {
            $scope.messageToUser = "Timeout called!";
        });
    }, 2000);

answered Feb 26, 2016 at 10:40

Vinay

5682 silver badges13 bronze badges

1 Comment

Vinay Over a year ago

refer this thread - stackoverflow.com/questions/21673404/…

Collectives™ on Stack Overflow

Manually call $scope.$apply raise error on ajax call - Error: [$rootScope:inprog]

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related