title: how to force automatically refresh ui-grid after adding row
body: <p>I spent a long time that to resolve this problem and need some help. I'm rendering grid on my page with help Angular Ui-Grid, but cannot force it to refresh data after I've added new row. 
  In my main controller I have function 'create event' which is calling service and template for modal that to upload data: </p>
  
  <pre><code>  $scope.createEvent = function (eventTypeId) {
  
              var newEvent = null;
              var eventFields = null;
              var opts = {
                  backdrop: 'static',
                  backdropClick: true,
                  dialogFade: false,
                  keyboard: true,
                  templateUrl: 'views/event.html',
                  controller: 'EventEditCtrl',
                  size: 'md',
                  resolve: {
                      params: function () {
                          return {model: newEvent, fields: eventFields, caption: "Create event"};
                      }
                  }
              };
  
              eventService.getEventTemplate(0, eventTypeId)
                  .then(function (data) {
                      newEvent = data.model;
                      newEvent.id = null;
                      newEvent.occuredDate = new Date(newEvent.occuredDate);
                      eventFields = data.fields;
                      var uibModalInstance = $uibModal.open(opts);
  
                      uibModalInstance.result.then(function (data) {
                              $location.path("views/" + data.model.id);
                          }, function () {
                          }
                      );
                  }, errorDetails)
  
          };
  </code></pre>
  
  <p>submit event and insert event from event controller look like</p>
  
  <pre><code> $scope.insertEvent = function (event) {
          $log.info('insert');
          $log.info(event);
  
          eventService.insertEvent(event)
              .then(function (data) {
                  $uibModalInstance.close(data);
              });
      };
  
  $scope.onSubmit = function (event) {
      console.log(event);
    if (event.id == null || event.id == 0) {
        $scope.insertEvent(event)
    }
  }
  </code></pre>
  
  <p>and finally my insert event service function looks like </p>
  
  <pre><code>    var insertEvent = function (event) {
          return $http({
              method  : 'POST',
              url     : apiUrl,
              data    : event
          })
              .then(function success (result ) {
                  console.log(result.data);
                  cachedEvents = result.data;
                  return result.data
  
              }, function error (response){
                  $log.error(" post has been failed ", response)
              })
      };
  </code></pre>
  
  <p>So insert works great, modal works great but grid doesn't update even if I'm trying to return promise or callback, it doesn't help, </p>
  
  <p>I've tried to set refreshing after modal has been closed, event has been inserted or when submit button has been clicked, but nothing helps</p>
  
  <pre><code>   $scope.gridApi.core.queueGridRefresh();
            $scope.gridApi.core.refresh();
            $scope.gridApi.grid.refreshCanvas();
            $scope.gridApi.grid.refreshRows();
  </code></pre>
  
  <p>also I've tried to set notification if grid has been changed, but it didn't help either:</p>
  
  <pre><code>    onRegisterApi: function (gridApi) {
                  $scope.gridApi = gridApi;
  
                  gridApi.core.on.columnVisibilityChanged($scope, function (changedColumn) {
                      $scope.columnChanged = {name: changedColumn.colDef.name, visible: changedColumn.colDef.visible};
                  });
  
                  //**********
  
                  gridApi.selection.on.rowSelectionChanged($scope, function (row) {
                      $scope.rowData = row.entity;
                      $scope.id = $scope.rowData.id;
                      $scope.rowKeys = Object.keys($scope.rowData);
                  });
  
                  gridApi.core.notifyDataChange( uiGridConstants.dataChange.ALL)
              }
  </code></pre>
  
  <p>original grid data initialization</p>
  
  <pre><code> var getData = (function () {
  
                  $http.get(urlData)
                      .success(function (data) {
                          // Considering Angular UI-Grid $scope.gridOptions.data should be declared as is
                          $scope.gridOptions.data = data;
                          // $interval whilst we wait for the grid to digest the data we just gave it
                          $interval(function () {
                              $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
                          }, 0, 1);
                      });
              }());
  </code></pre>
  
  <p>I appreciate if somebody could help me to find my mistake.</p>