title: Angular ng-grid footer is not adjusting the height according to grid
body: <p>I want to reduce the height when a row is removed from ng-grid. I am able to delete a row reduce the grid height by a row. but grid footer is not moving from its position.</p>
  
  <p>here is the code I am using</p>
  
  <p>--html</p>
  
  <pre><code>      &lt;div class="gridStyle" ui-if="InterestInfo.length&gt;0" ng-grid="gridOptions" ng-     style="getTableStyle()"   &gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>--javascript</p>
  
  <pre><code>var varFooterTempate = '&lt;div&gt;&lt;button type="button" class="btn btn-xs btn-success"  ng-click="edit(row)"  &gt; ' +
                                     ' &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;' +
                                  '&lt;/button&gt;'
  
  $scope.getTableStyle = function () {
      var rowHeight = 35;
      var headerHeight = 30;
      var footerHeight = 30;
      return {
          height: ($scope.InterestInfo.length * rowHeight + headerHeight + footerHeight + 5) + "px"
      };
  };
  
  
      $scope.gridOptions = {
      data: 'InterestInfo',
      headerRowHeight: 30,
      rowHeight: 35,
      footerRowHeight: 30,
      showFooter: true,
      footerTemplate: varFooterTempate,
      columnDefs: [{ field: 'name', displayName: 'Name' },
    { field: 'type', displayName: 'Type' },
    { field: 'number', displayName: 'Number' },
    { field: '', displayName: 'Action', width: 140, sortable: false, cellTemplate: editableInPopup}],
      multiSelect: false
  
  };
  $scope.removeRow = function () {
  
  
      var index = this.row.rowIndex;
      alert(index);
      $scope.gridOptions.selectItem(index, false);
      $scope.InterestInfo.splice(index, 1);
  };
  </code></pre>