var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.pinning']);

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

  var customSelColumn = {
    name: '_selection',
    field: 'id', // Just use ID and fake it for filter (see below)
    type: 'boolean',
    pinnedLeft: true,
    enableColumnMenu: false,
    enableSorting: false,
    enablePinning: false,
    enableHiding: false,
    displayName: 'Selected',
    headerTooltip: 'Whether or not this row is selected',
    width: 120,
    headerCellTemplate: 'customSelectionHeaderCell.html', // Based on ui-grid/selectionHeaderCell and ui-grid/uiGridHeaderCell
    cellTemplate: 'customSelectionRowHeader.html', // Based on ui-grid/selectionRowHeader
    filter: {
      type: uiGridConstants.filter.SELECT,
      selectOptions: [{value: true, label: 'Yes'}, {value: false, label: 'No'}],
      condition: function(searchTerm, cellValue, row, col) {
          var fakeVal = (cellValue % 2 === 0); // Just faking some value so the filter works
          return searchTerm == fakeVal;
      }
    }
  };
  
  $scope.gridOptions = {
    fastWatch: true,
    enableFiltering: true,
    enableGridMenu: true,
    enableRowHeaderSelection: false,
    enableFullRowSelection: false,
    selectionRowHeaderWidth: 35,
    showGridFooter: true,
    onRegisterApi: function(gridApi) {
      $scope.gridApi = gridApi;
    }
  };

  $scope.gridOptions.columnDefs = [
    customSelColumn, // NOTE: Using a custom selection column here!
    { name: 'id', width: 80 },
    { name: 'name', width: 80 },
    { name: 'age', width: 80 },
    { name: 'address.city', width: 80 },
    { name: 'id2', field: 'id', width: 80 },
    { name: 'name2', field: 'name', width: 80 },
    { name: 'age2', field: 'age', width: 80 },
    { name: 'address.city2', field: 'address.city', width: 80 }
  ];

  $http
    .get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
      $timeout(function() {
        if ($scope.gridApi.selection.selectRow) {
          $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
        }
      });
    });
}]);
.grid {
  width: 100%;
  height: 400px;
}

<!doctype html>
<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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="https://rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.7/ui-grid.js"></script>
  <link rel="stylesheet" href="https://rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.7/ui-grid.css" type="text/css">
  <link rel="stylesheet" href="main.css" type="text/css">
</head>

<body>
  <div ng-controller="MainCtrl">
    <div ui-grid="gridOptions" ui-grid-selection ui-grid-pinning class="grid"></div>
  </div>

  <script src="app.js"></script>
</body>

</html>
<div
  role="columnheader"
  ng-class="{ 'sortable': sortable }"
  ui-grid-one-bind-aria-labelledby-grid="col.uid + '-header-text ' + col.uid + '-sortdir-text'"
  aria-sort="{{col.sort.direction == asc ? 'ascending' : ( col.sort.direction == desc ? 'descending' : (!col.sort.direction ? 'none' : 'other'))}}">
  <div
    role="button"
    tabindex="0"
    class="ui-grid-cell-contents ui-grid-header-cell-primary-focus"
    col-index="renderIndex"
    title="TOOLTIP">
    <span
      class="ui-grid-header-cell-label"
      ui-grid-one-bind-id-grid="col.uid + '-header-text'">
      {{ col.displayName CUSTOM_FILTERS }}
    </span>

    <span
      ui-grid-one-bind-id-grid="col.uid + '-sortdir-text'"
      ui-grid-visible="col.sort.direction"
      aria-label="{{getSortDirectionAriaLabel()}}">
      <i
       ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }"
       title="{{col.sort.priority ? i18n.headerCell.priority + ' ' + col.sort.priority : null}}"
       aria-hidden="true">
     </i>
     <sub
       class="ui-grid-sort-priority-number">
       {{col.sort.priority}}
     </sub>
    </span>
  </div>

  <div
    role="button"
    tabindex="0"
    ui-grid-one-bind-id-grid="col.uid + '-menu-button'"
    class="ui-grid-column-menu-button"
    ng-if="grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false"
    ng-click="toggleMenu($event)"
    ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}"
    ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"
    aria-haspopup="true">
    <i
      class="ui-grid-icon-angle-down"
      aria-hidden="true">
      &nbsp;
    </i>
  </div>

  <div ui-grid-filter></div>

  <ui-grid-selection-select-all-buttons
      ng-if="grid.options.enableSelectAll" class="text-center">
  </ui-grid-selection-select-all-buttons>
</div>

<div
  class="ui-grid-disable-selection">
  <div
    class="ui-grid-cell-contents">
    <ui-grid-selection-row-header-buttons class="text-center">
    </ui-grid-selection-row-header-buttons>
  </div>
</div>