var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {
    columnDefs: [
      { name: 'name', cellTemplate: 'nameTemplate.html' },
      { name: 'balance' },
      { name: 'city', cellTemplate: 'cityTemplate.html' }
    ]
  };
  
  $http.get('data.json')
  .success(function (data) {
    $scope.gridOptions.data = data;
  });
}])

;
body {
  padding: 5px;
}

.grid {
  width: 100%;
  height: 250px;
}

.grid-tooltip {
  overflow: visible;
  z-index: 9999999;
  float: left;
}
<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
    <script data-require="ui-bootstrap@0.12.1" data-semver="0.12.1" src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script src="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.js"></script>
    <link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css" />
  </head>

  <body>
    <div ng-controller="MainCtrl">
      <div id="grid1" ui-grid="gridOptions" class="grid"></div>
    </div>
    <script src="app.js"></script>
  </body>

</html>
[
  {
    "name": "Bishop",
    "email": "bishopwilkerson@netility.com",
    "balance": 95.26,
    "city": "Freeburn",
    "state": "Texas"
  },
  {
    "name": "Trevino",
    "email": "trevinowilkerson@netility.com",
    "balance": 353.84,
    "city": "Nicut",
    "state": "Pennsylvania"
  },
  {
    "name": "Kerry",
    "email": "kerrywilkerson@netility.com",
    "balance": 630.97,
    "city": "Frystown",
    "state": "Indiana"
  },
  {
    "name": "Gretchen",
    "email": "gretchenwilkerson@netility.com",
    "balance": 671.64,
    "city": "Rodman",
    "state": "District Of Columbia"
  },
  {
    "name": "Reilly",
    "email": "reillywilkerson@netility.com",
    "balance": 710.15,
    "city": "Summerset",
    "state": "Minnesota"
  },
  {
    "name": "Osborn",
    "email": "osbornwilkerson@netility.com",
    "balance": 423.11,
    "city": "Brewster",
    "state": "Montana"
  },
  {
    "name": "Sheryl",
    "email": "sherylwilkerson@netility.com",
    "balance": 591.39,
    "city": "Saddlebrooke",
    "state": "Oklahoma"
  },
  {
    "name": "Nguyen",
    "email": "nguyenwilkerson@netility.com",
    "balance": 884.9,
    "city": "Delco",
    "state": "Tennessee"
  },
  {
    "name": "Berry",
    "email": "berrywilkerson@netility.com",
    "balance": 772.21,
    "city": "Fontanelle",
    "state": "Ohio"
  },
  {
    "name": "Webb",
    "email": "webbwilkerson@netility.com",
    "balance": 743.96,
    "city": "Catharine",
    "state": "Massachusetts"
  },
  {
    "name": "Vasquez",
    "email": "vasquezwilkerson@netility.com",
    "balance": 150.21,
    "city": "Gallina",
    "state": "Utah"
  },
  {
    "name": "Mildred",
    "email": "mildredwilkerson@netility.com",
    "balance": 894.48,
    "city": "Brutus",
    "state": "Nevada"
  },
  {
    "name": "Kristine",
    "email": "kristinewilkerson@netility.com",
    "balance": 843.49,
    "city": "Bodega",
    "state": "Louisiana"
  },
  {
    "name": "Ilene",
    "email": "ilenewilkerson@netility.com",
    "balance": 161.47,
    "city": "Beason",
    "state": "Northern Mariana Islands"
  },
  {
    "name": "Deana",
    "email": "deanawilkerson@netility.com",
    "balance": 871.33,
    "city": "Loretto",
    "state": "Virgin Islands"
  },
  {
    "name": "James",
    "email": "jameswilkerson@netility.com",
    "balance": 844.93,
    "city": "Tilden",
    "state": "Delaware"
  },
  {
    "name": "Brittany",
    "email": "brittanywilkerson@netility.com",
    "balance": 626.98,
    "city": "Geyserville",
    "state": "South Carolina"
  },
  {
    "name": "Leona",
    "email": "leonawilkerson@netility.com",
    "balance": 283.11,
    "city": "Datil",
    "state": "Kentucky"
  },
  {
    "name": "Pace",
    "email": "pacewilkerson@netility.com",
    "balance": 649.4,
    "city": "Fresno",
    "state": "Alaska"
  },
  {
    "name": "Alexis",
    "email": "alexiswilkerson@netility.com",
    "balance": 812.77,
    "city": "Hannasville",
    "state": "Vermont"
  },
  {
    "name": "Christi",
    "email": "christiwilkerson@netility.com",
    "balance": 156.4,
    "city": "Basye",
    "state": "Maryland"
  },
  {
    "name": "Mejia",
    "email": "mejiawilkerson@netility.com",
    "balance": 639.48,
    "city": "Singer",
    "state": "Florida"
  },
  {
    "name": "Nash",
    "email": "nashwilkerson@netility.com",
    "balance": 142.35,
    "city": "Bergoo",
    "state": "New York"
  },
  {
    "name": "Amber",
    "email": "amberwilkerson@netility.com",
    "balance": 635.42,
    "city": "Kaka",
    "state": "Wyoming"
  },
  {
    "name": "Fuentes",
    "email": "fuenteswilkerson@netility.com",
    "balance": 224.88,
    "city": "Finzel",
    "state": "New Hampshire"
  },
  {
    "name": "Dale",
    "email": "dalewilkerson@netility.com",
    "balance": 468.08,
    "city": "Fillmore",
    "state": "Marshall Islands"
  },
  {
    "name": "Yesenia",
    "email": "yeseniawilkerson@netility.com",
    "balance": 343.73,
    "city": "Marshall",
    "state": "Nebraska"
  },
  {
    "name": "Ortiz",
    "email": "ortizwilkerson@netility.com",
    "balance": 470.11,
    "city": "Advance",
    "state": "California"
  },
  {
    "name": "Olsen",
    "email": "olsenwilkerson@netility.com",
    "balance": 304.92,
    "city": "Blairstown",
    "state": "Hawaii"
  },
  {
    "name": "Sybil",
    "email": "sybilwilkerson@netility.com",
    "balance": 848.55,
    "city": "Juarez",
    "state": "South Dakota"
  },
  {
    "name": "Robles",
    "email": "robleswilkerson@netility.com",
    "balance": 602.39,
    "city": "Salunga",
    "state": "New Mexico"
  }
]
<div class="grid-tooltip" tooltip="{{ row.entity.email }}" tooltip-placement="right">
  <div class="ui-grid-cell-contents">
    {{ COL_FIELD }}
  </div>
</div>
<div class="grid-tooltip" tooltip="{{ row.entity.state }}" tooltip-placement="top" tooltip-append-to-body="true">
  <div class="ui-grid-cell-contents">
    {{ COL_FIELD }}
  </div>
</div>