title: ($rootScope:inprog) $apply already in progress
body: <p>I'm trying apply changes to ui grid after refreshing data but getting this error:</p>
  
  <pre><code>    angular.js:13236 Error: [$rootScope:inprog] $apply already in progress
  
   http://errors.angularjs.org/1.5.0/$rootScope/inprog?p0=%24apply
          at angular.js:68
          at beginPhase (angular.js:17178)
          at Scope.$digest (angular.js:16616)
          at Scope.$apply (angular.js:16928)
          at Scope.$scope.submitForm (app-controllers.js:652)
          at fn (eval at compile (angular.js:14086), &lt;anonymous&gt;:4:335)
          at expensiveCheckFn (angular.js:15076)
          at callback (angular.js:24546)
          at Scope.$eval (angular.js:16820)
      at Scope.$apply (angular.js:16920)
  </code></pre>
  
  <p>What can be wrong? my code below </p>
  
  <p>get data</p>
  
  <pre><code>    var initialData = [] 
  var getData = function (castomUrl) {
                  $http.get(castomUrl)
                      .success(function (data) {
                          // console.log(data)
                          // Considering Angular UI-Grid, the data should be declared inside as scope var and put it inside gridOptions
                          $scope.initialData = data;
                          // $scope.gridOptions.data = $scope.initialData;
                          // ***
                          angular.forEach($scope.initialData, function (val) {
                              val.occuredDate = new Date(val.occuredDate);
                          });
                          // $interval whilst we wait for the grid to digest the data we just gave it
                          $interval(function () {
                              $scope.gridApi.selection.selectRow($scope.initialData[0]);
                          }, 0, 1);
                      });
              };
              getData(urlData);
  </code></pre>
  
  <p>get row value by click</p>
  
  <pre><code>     gridApi.selection.on.rowSelectionChanged($scope, function (row) {
                          // api call to get row Data and update for current row
                          var dataRow = row.entity;
                          $scope.id = dataRow.id;
                          $scope.getRowData();
                      });
  
   $scope.getRowData = function(){
                  eventService.singleEvent($scope.id)
                      .then(function (data) {
                          $scope.rowData = data.model;
                          $scope.rowKeys = Object.keys($scope.rowData);
                      }).then(function () {
                      $scope.getUpdate();
                  });
              };
  </code></pre>
  
  <p>where eventService.singleEvent is </p>
  
  <pre><code> function singleEvent (id) {
              return $http.get(apiUrl+id)
                          .then(function (serviceResp) {
                             return serviceResp.data;
                          });
          }
  </code></pre>
  
  <p>display row data as form html</p>
  
  <pre><code>  &lt;form style="padding: 15px" ng-submit="submitForm(rowData)"&gt;
                                      &lt;div class="form-group row"&gt;
  
                                          &lt;div ng-repeat="(key, value) in rowData"&gt;
                                              &lt;div ng-if="(key === 'id' || key.toLowerCase().endsWith('id') === false) ? true : false"&gt;
                                                  &lt;label for="rowData" class="col-sm-2"&gt;{{key | makeUppercase
                                                      }}&lt;/label&gt;
                                                  &lt;div class=" col-sm-2"&gt;
                                                      &lt;input class="form-control rowValue"
                                                             id="rowData[key]"
                                                             ng-disabled="disableInput(key)"
                                                             ng-if="!isObject(value)"
                                                             type="text"
                                                             ng-model="rowData[key]"
                                                      /&gt;
                                                      &lt;input
                                                              class="form-control rowValue"
                                                              id="rowData[key].name"
                                                              ng-disabled="disableInput(key)"
                                                              ng-if="isObject(value) &amp;&amp; key !== 'status' &amp;&amp; key !== 'priority' &amp;&amp; key !== 'severity'"
                                                              type="text"
                                                              ng-model="rowData[key].name"
                                                      /&gt;
                                                      &lt;select ng-if="isObject(value) &amp;&amp; key == 'status'"
                                                              ng-model="rowData.statusId"
                                                              class="form-control rowValue"
                                                              id="statusId"
                                                              ng-options='item.id as item.name for item in eventLov.statusOptions()'&gt;
                                                          &lt;option value=''&gt;{{value.name}}&lt;/option&gt;
                                                      &lt;/select&gt;
                                                      &lt;select ng-if="isObject(value) &amp;&amp; key == 'priority'"
                                                              ng-model="rowData.priorityId"
                                                              class="form-control rowValue"
                                                              id="priorityId"
                                                              ng-options='item.id as item.name for item in eventLov.priorityOptions()'&gt;
                                                          &lt;option value=''&gt;{{value.name}}&lt;/option&gt;
                                                      &lt;/select&gt;
                                                      &lt;select ng-if="isObject(value) &amp;&amp; key == 'severity'"
                                                              ng-model="rowData.severityId"
                                                              class="form-control rowValue"
                                                              id="severityId"
                                                              ng-options='item.id as item.name for item in eventLov.severityOptions()'&gt;
                                                          &lt;option value=''&gt;{{value.name}}&lt;/option&gt;
                                                      &lt;/select&gt;
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;button type="submit" class="btn btn-default" ng-if="rowData"&gt;Save&lt;/button&gt;
                                      &lt;button type="button" class="btn btn-default" ng-if="rowData"
                                              ng-click="cancelForm()"&gt;
                                          Cancel
                                      &lt;/button&gt;
                                  &lt;/form&gt;
  </code></pre>
  
  <p>submit changes</p>
  
  <pre><code>     $scope.submitForm = function (event) {
                  $scope.modifyEvent(event);
                  $timeout( function(){
                      $rootScope.refresh();
                  }, 100);
              };
  
   $scope.modifyEvent = function (event) {
                  // $log.info(event);
                  eventService.modifyEvent(event)
              };
  </code></pre>
  
  <p>update services</p>
  
  <pre><code> function modifyEvent (event) {
             return $http({
                 method   : 'PUT',
                 url      : apiUrl + event.id,
                 data     : event
             }, event)
             .then(function success (result) {
                 $log.info("Update Successful");
                 return result.data;
             }, function error( err ) {
                 $log.error(" update has been failed ", err);
             });
          }
  </code></pre>
  
  <p>refresh grid </p>
  
  <pre><code>$rootScope.refresh = function () {
  
                  $log.info("fired");
                  eventService.events();
                  $scope.$apply();
  }
  </code></pre>
  
  <p>refresh services</p>
  
  <pre><code> function events () {
          return $http.get(apiUrl)
                      .then(function (serviceResp) {
                          return serviceResp.data;
                      });
      }
  </code></pre>
  
  <p>in the end I see the error </p>
  
  <blockquote>
    <p>$apply already in progress</p>
  </blockquote>
  
  <p>but data has been uploaded to DB and modified. What can be wrong? </p>