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

advertisements

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


$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.