Refer to the complete code in this plnkr: http://plnkr.co/edit/i5zAuUKz2RdJpuq5YKud

Setting up all the things:

1. Create 3 file:
1. app.js - Contains your Angular JS code.
2. index.html - Contains the UI HTML5 code.
3. main.css - Our styling stuff goes here.
2. Required imports in index.html are:
1. JS Scripts 
1. src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.js"
2. src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-touch.js"
3. src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-animate.js"
4. src="http://ui-grid.info/release/ui-grid-stable.js"
2.  CSS Styling 
1. href="http://ui-grid.info/release/ui-grid-stable.css"

var app = angular.module('app', ['ngAnimate', 'ui.grid']);
 
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.maxRowToShow = 1000;
  $scope.gridOptions = {
      enableColumnMenus: false,
      enableHiding: false,
      enableSorting: false
    };
  $scope.gridOptions.columnDefs= [
      { field: 'name' },
      { field: 'gender' },
      { field: 'company', enableSorting: false }
    ];
 
  $scope.getTableHeight = getTableHeight;
 
  $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
      setMinRowsToShow();
    });
 
  function setMinRowsToShow(){
    //This function is to set the rowContainer with minimum row limit to be stored 
    //in the visibleRowCache.
    //It handles and rogue cache or missed rows due to dynamically generated Table Height.
    $scope.gridOptions.minRowsToShow = Math.min($scope.gridOptions.data.length, $scope.maxRowToShow);
    $scope.gridOptions.virtualizationThreshold = $scope.gridOptions.minRowsToShow ;
  }
 
  function getTableHeight() {
    let rowHeight = 37; // row height
    let headerHeight = 48; // header height
    return {
      height: ($scope.gridOptions.data.length * rowHeight + headerHeight) + "px"
    };
  }
}]);
 

Dive in the Code:

• maxRowToShow: This defines the upper limit of rows to be rendered
• Initial Grid config: 
  • enableColumnMenus: false,
  • enableHiding: false,
  • enableSorting: false
• Fetch and store data in scope.gridOptions.data
• getTableHeight: Now here is where the magic happens-
• we give the rowHeight and headerHeight as defined in our css or as per your requirement
• Calculation of height attribute using the below formula:-

(Number of data rows) * rowHeight + headerHeight [in px]

• columnDefs: Contains the meta data for your grid column, like name, specific formatting etc.
• Lastly, the one which is bit confusion is setMinRowsToShow, which we will cover once i have shown you the output

UI Grid with dynamic height, but we can see a large white gap between the last row and footer

1. grid.renderContainers.body.visibleRowCache does not refresh the renderedRows arry when splicing in more data. That means when the number of rows are more in conjunction with the grid height, the module is unable to refresh renderedRows and we see only 4 rows
   Here are the counts:
1. renderedRows: 4
2. visibleRowCache: 100
3. visibleColumnCache: 3
4. viewportAdjuster: 1
2. The above issue of only 4 rows in renderedRows array is due to the fact that ui-grid does not completely support dynamic height feature.
3. But there is this parameter which comes to our rescue - virtualisationThreshold
4. Lets fix the above issue gracefully:

$scope.gridOptions.minRowsToShow = Math.min($scope.gridOptions.data.length, $scope.maxRowToShow);
$scope.gridOptions.virtualizationThreshold = $scope.gridOptions.minRowsToShow ;