AngularJS 1.5.x UI-Grid

angular.module(
  'wowUIGrid', 
  [
  'ui.grid', 
  'ui.grid.cellNav', 
  'ui.grid.edit', 
  'ui.grid.resizeColumns', 
  'ui.grid.pinning', 
  'ui.grid.selection', 
  'ui.grid.moveColumns'
  ]
);

angular.module('wowUIGrid')
  .controller('MainCtrl', MainCtrl);

MainCtrl.$inject = ['$scope', '$http', 'uiGridConstants'];

function MainCtrl($scope, $http, uiGridConstants) {
  $scope.name = 'World';
  $scope.gridOptions = {
    enableFiltering: true,
    showGridFooter:true,
    showColumnFooter:false,
    onRegisterApi: function(gridApi){
      $scope.gridApi = gridApi;
      console.log("init api");
    },
    columnDefs: [
      { field: 'name', width: 100,
        pinnedLeft: 'left'
      },
      { field: 'gender',width: 100},                               
      { field: 'company',width: 100, enableFiltering: false },
      { field: 'email',width: 100, enableFiltering: false },
      { field: 'phone',width: 100, enableFiltering: false },
      { field: 'age',width: 130, enableFiltering: false },
      { field: 'mixedDate', width: '15%', enableFiltering: false },
      { field: 'company',width: 100, enableFiltering: false },
      { field: 'email',width: 100, enableFiltering: false },
      { field: 'phone', width: 100,enableFiltering: false },
      { field: 'company',width: 100, enableFiltering: false },
      { field: 'email', width: 100,enableFiltering: false },
      { field: 'phone',width: 100, enableFiltering: false },
      { field: 'company', width: 100,enableFiltering: false },
      { field: 'email', width: 100,enableFiltering: false },
      { field: 'phone', width: 100,enableFiltering: false },
      { field: 'company',width: 100, enableFiltering: false },
      { field: 'email',width: 100, enableFiltering: false },
      { field: 'phone',width: 100, enableFiltering: false }
    ]
  };
  
  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}

<!DOCTYPE html>
<html ng-app="wowUIGrid">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div id="grid1" 
    ui-grid="gridOptions" 
    ui-grid-cellnav="" 
    ui-grid-edit="" 
    ui-grid-resize-columns="" 
    ui-grid-pinning="" 
    ui-grid-selection="" 
    ui-grid-move-columns="" 
    class="grid"></div>
  </body>

</html>

.grid {
  width: 650px;
  height: 400px;
}
.modalGrid {
  width: 100px;
  height: 200px;
}
.modal-dialog {
  width: 150px;
}


.ui-grid-header-cell-wrapper .ui-grid-header-cell:first-child .ui-grid-column-resizer.left {
  width: 2px;
  border: 2px solid #ff0000;
}

/* Uncomment next string for fix
.ui-grid-header-cell-wrapper .ui-grid-header-cell:first-child .ui-grid-column-resizer.left {
    display: none;
}
*/