Ui-grid with auto height while grouping and selectable rows

<!doctype html>
<html ng-app="app">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-touch.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-animate.js"></script>
        
        <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
        <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
        <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
        
       
        
        <link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    
        <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
        <link rel="stylesheet" href="style.css" type="text/css">
        <link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
        
       <script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
    </head>
    <body ng-controller="TableCrtl">
            <div id="grid1" ui-grid="gridOpts" ui-grid-selection ui-grid-resize-columns ui-grid-grouping="" class="grid"></div>
        <script src="script.js"></script>
        
        
        
    </body>
</html>

// Code goes here

var app = angular.module('app', ['ui.grid', 'ngTagsInput', 'ui.grid.grouping','ui.grid.autoResize','ui.grid.selection']);

app.controller('TableCrtl', ['$scope', function($scope) {
  $scope.addData = function() {
    var n = $scope.gridOpts.data.length + 1;
    $scope.gridOpts.data.push({
      "firstName": "New " + n,
      "lastName": "Person " + n,
      "company": "abc",
      "employed": true
    });
  };

  var myDummyData = [{
    name: "Moroni",
    age: 50,
    othernames: [{
      "id": "104",
      "name": "four"
    }]
  }, {
    name: "Tiancum",
    age: 43,
    othernames: [{
      "id": "101",
      "name": "one"
    }, {
      "id": "102",
      "name": "two"
    }]
  }, {
    name: "Jacob",
    age: 27,
    othernames: [{
      "id": "103",
      "name": "three"
    }]
  }];

 $scope.loadCountries = function ($query) {
          
                var countries = [{
      "id": "101",
      "name": "one"
    },
    {
      "id": "102",
      "name": "two"
    },
    {
      "id": "103",
      "name": "three"
    },
    {
      "id": "104",
      "name": "four"
    }];
                return countries.filter(function (country) {
                    return country.name.toLowerCase().indexOf($query.toLowerCase()) != -1;
                });
          
        };
  $scope.filterOptions = {
    filterText: ''
  };

  $scope.gridOpts = {
    data: myDummyData,
    enableFiltering: true,
    rowHeight:60,
    rowTemplate:'rowTemplate',
    columnDefs: [{
      name: 'Name',
      field: 'name',
      enableFiltering: true
        ,grouping: { groupPriority: 0 }
        ,cellTempalte:'<div><div ng-if="!col.grouping || col.grouping.groupPriority === undefined || col.grouping.groupPriority === null || ( row.groupHeader && col.grouping.groupPriority === row.treeLevel )" class="ui-grid-cell-contents" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div></div>'
        
     
    }, {
      name: 'Price',
      field: 'age'
    }, {
      name: 'others',
      field: 'othernames',
      cellTemplate: 'ddlTemplate.html'
    }]
  };




}]);

/* Styles go here */

.cart-item.ng-enter {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
  background-color: yellow;
}
.cart-item.ng-enter-active {
  background-color: white;
}

.myGrid {
    width: 1200px;
    height: 800px;
}



.ui-grid-row{
  height: auto!important;
}


.ui-grid-row   > div {
  display: table-row;
  
}

.ui-grid-row > div .ui-grid-cell {
  display: table-cell;
  float: none;
  vertical-align: middle;
  height: auto!important;
}

.ui-grid-cell-contents{
  white-space: normal;
  text-overflow: inherit;
  word-break: break-word;
}

<div ng-if="!row.groupHeader" class="ui-grid-cell-contents" style="overflow:visible">
  <tags-input ng-model="row.entity.othernames" display-property="name" placeholder="Add a Manager" replace-spaces-with-dashes="false">
    <auto-complete source="grid.appScope.loadCountries($query)" min-length="0" load-on-focus="true" load-on-empty="true" max-results-to-show="32"></auto-complete>

  </tags-input>
</div>

<div>
    <div style="height: 100%" ng-if="row.groupHeader">
        <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name">
            <div ng-if="$index <=5 && col.displayName !== 'Service Description' && col.displayName !== 'Code'" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell fullWidthUiGrid UiGridHeaderColor' : col.displayName === 'Category' || col.displayName === 'Specialty', 'ui-grid-row-header-cell UiGridHeaderColor' : col.displayName !== 'Category' || col.displayName === 'Provider Speciality'}"
                 ui-grid-cell></div>
        </div>
    </div>
    <div style="height: 100%;" ng-if="!row.groupHeader && !grid.appScope.estimationModel.IsEstimationFinalized">
        <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" style="overflow: visible !important;" ng-class="{'duplicateRowBackGround ui-grid-cell' : row.entity.duplicate , 'ui-grid-cell' : !row.entity.duplicate}" ui-grid-cell>
        </div>
    </div>
</div>