AngularJS Example Plunkr

var app = angular.module('app', ['ngAnimate','ngTouch', 'ui.grid','ui.grid.resizeColumns', 'ui.grid.moveColumns',  'ui.grid.pagination', 'ui.grid.selection', 'ui.grid.exporter']);




app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {

$scope.gridOptions = {
  enableGridMenu: true,
    enableSelectAll: true,
    exporterCsvFilename: 'myFile.csv',
    enableFiltering: true,
    enableColumnReordering: true,
    enableColumnResizing: true,
    paginationPageSizes: [2, 3, 5],
    paginationPageSize: 4,
    columnDefs: [
      
      { field: 'Id', headerCellClass: $scope.highlightFilteredHeader },
      { field: 'Address', headerCellClass: $scope.highlightFilteredHeader },
      { field: 'Street', headerCellClass: $scope.highlightFilteredHeader },
      { field: 'Side', headerCellClass: $scope.highlightFilteredHeader },
      { field: 'Site', headerCellClass: $scope.highlightFilteredHeader },
      { field: 'Species', headerCellClass: $scope.highlightFilteredHeader },
      { field: 'DBH', headerCellClass: $scope.highlightFilteredHeader },
      { field: 'Condition',  }
      ],
      
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
    }
 
};


  $scope.myData = [
    {
  
        "ID": 1,
        "Address": 3728,
        "Street": "Fishcreek Rd",
        "Side": "Front",
        "Site": 1,
        "Species": "Acer Rubrum",
        "DBH": 21,
        "Condition":"Good"
    },
    {
        "ID": 2,
        "Address": 3728,
        "Street": "Fishcreek Rd",
        "Side": "Front",
        "Site": 2,
        "Species": "Acer Rubrum",
        "DBH": 18,
        "Condition":"Fair"
    },
    {
        "ID": 3,
        "Address": 3728,
        "Street": "Fishcreek Rd",
        "Side": "Front",
        "Site": 3,
        "Species": "Acer Rubrum",
        "DBH": 19,
        "Condition":"Poor"
    },
    {
        "ID": 4,
        "Address": 3728,
        "Street": "Fishcreek Rd",
        "Side": "Front",
        "Site": 3,
        "Species": "Vacant Planting Site",
        "DBH": 0,
        "Condition":"N/A"
    },
    {
        "ID": 5,
        "Address": 3728,
        "Street": "Fishcreek Rd",
        "Side": "Front",
        "Site": 4,
        "Species": "Acer Rubrum",
        "DBH": 20,
        "Condition":"Dead"
    },
    {
        "ID": 6,
        "Address": 3738,
        "Street": "Fishcreek Rd",
        "Side": "Front",
        "Site": 1,
        "Species": "Vacant Planting Site",
        "DBH": 0,
        "Condition":"N/A"
    },
    {
        "ID": 7,
        "Address": 3738,
        "Street": "Fishcreek Rd",
        "Side": "Front",
        "Site": 1,
        "Species": "Fraxinus spp.",
        "DBH": 12,
        "Condition":"Dead"
    }
];
$scope.gridOptions.data = $scope.myData;
 
}]);

.grid {
  width: 700px;
  height: 250px;
}

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.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.js"></script>
    <script src="/release/ui-grid.js"></script>
    <script src="/release/ui-grid.css"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div id="grid1" ui-grid="{ data: myData }" class="grid" ui-grid-resize-columns ui-grid-move-columns></div>
  <br>
  <br>
  
      <br>
      <div id="grid1" ui-grid="gridOptions" ui-grid-pagination ui-grid-selection ui-grid-exporter class="grid"></div>
</div>

  </body>
</html>