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](http://stackoverflow.com/q/35624977) is an asynchronous issue. (Values can't be returned **before** a promise is resolved.) `$apply()` won't fix that problem. — georgeawg, Feb 26 '16 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, Feb 26 '16 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, Feb 26 '16 at 13:02
@georgeawg I posted a new question http://stackoverflow.com/questions/35652828/http-issue-values-cant-be-returned-before-a-promise-is-resolved-in-angular-m which describes the issue details with my trial and error attempt history. — B.Balamanigandan, Feb 26 '16 at 13:20

score 2 · Accepted Answer · answered Feb 26 '16 at 07:43

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 '16 at 07:43

Martijn Welker

5,575
1
16
26

Then how to update the new values in the autocomplete list? In the Post http://stackoverflow.com/questions/21127709/angular-controller-scope-not-updating-after-jquery-ajax-call - they are suggesting to call $scope.$apply() manually to update the UI. – B.Balamanigandan Feb 26 '16 at 07:46
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 Feb 26 '16 at 07:47
Make a new question regarding that exact issue with details, this one is answered. – Martijn Welker Feb 26 '16 at 07:50
Kindly visit the post http://stackoverflow.com/questions/35624977/md-items-is-not-updating-the-suggesion-list-properly-in-md-autocomplete-angular here I posted the screen shot with issues using actual data. – B.Balamanigandan Feb 26 '16 at 07:51
@MartijnWelker is right. Your [Question #35624977](http://stackoverflow.com/q/35624977) is an asynchronous issue. (Values can't be returned **before** a promise is resolved.) `$apply()` won't fix that problem. – georgeawg Feb 26 '16 at 11:32

score 1 · Answer 2 · answered Feb 26 '16 at 08:22

1

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

Documentation here.

answered Feb 26 '16 at 08:22

Slytherin

474
3
17

score 1 · Answer 3 · answered Feb 26 '16 at 10:40

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 '16 at 10:40

Vinay

548
2
12

refer this thread - http://stackoverflow.com/questions/21673404/error-ngareq-from-angular-controller – Vinay Feb 26 '16 at 11:03

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

3 Answers3

Linked