title: Angular UI Grid show another view when row is clicked
body: <p>This topic is very related with <a href="https://stackoverflow.com/questions/30224022/angular-ui-grid-click-row">this one</a>.
  Briefly, there is a ui grid (table) and when you click (touch) on an row item in table, it shows another view, but I'm stuck (ES5):</p>
  
  <pre><code>var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.router']);
  
  app.controller('MainCtrl', ['$scope', 'uiGridConstants', function ($scope, uiGridConstants) {
    $scope.gridOptions = { enableRowSelection: true, enableRowHeaderSelection: false };
  
    $scope.gridOptions.columnDefs = [
      { field: "contactId", displayName: "CID", width: 60 },
      { field: "name", displayName: "Contact Name" } 
    ];
  
    $scope.myData = [{contactId: 1, name: "Contact 1"},
                     {contactId: 2, name: "Contact 2"},
                     {contactId: 3, name: "Contact 3"},
                     {contactId: 4, name: "Contact 4"}];
  
    $scope.gridOptions.data = [];
  
    $scope.gridOptions.data = $scope.myData;
  
    $scope.gridOptions.multiSelect = false;
    $scope.gridOptions.modifierKeysToMultiSelect = false;
    $scope.gridOptions.noUnselect = true;
  
    $scope.gridOptions.onRegisterApi = function (gridApi) {
          //set gridApi on scope
          $scope.gridApi = gridApi;
          gridApi.selection.on.rowSelectionChanged($scope, function (row) {
              $state.go("contact.detail.view", {contactId: row.entity.contactId});
          });
      }
  }]);
  </code></pre>
  
  <p>Here is the plunker <a href="http://plnkr.co/edit/eHLXMDd7e3vnjsf2BWWf?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/eHLXMDd7e3vnjsf2BWWf?p=preview</a></p>