How to hide column in ng grid?

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

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <style>
    .gridStyle {
      height: 500px;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
  <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
  <script>
    var app = angular.module("userApp", ['ngGrid']);

    app.controller("MyUserController", function($scope) {

      $scope.users = [{
        UserId: 01,
        Name: "Anil Singh",
        Qualification: "MCA"
      }, {
        UserId: 02,
        Name: "Sunil",
        Qualification: "M.A. PhD"
      }, {
        UserId: 03,
        Name: "Sushil",
        Qualification: "B.Tech"
      }, {
        UserId: 04,
        Name: "Dilip",
        Qualification: "MCA"
      }, {
        UserId: 05,
        Name: "Upendra",
        Qualification: "MBA"
      }, {
        UserId: 06,
        Name: "Reena",
        Qualification: "M.A(English)"
      }];


      $scope.gridOptions = {
        data: 'users',
        multiSelect: true,
        columnDefs: [{
          field: 'UserId',
          displayName: 'UserId',
          visible: false
        }, {
          field: 'Name',
          displayName: 'UserName'
        }, {
          field: 'Qualification',
          displayName: 'Education'
        }]
      };
    });
  </script>
</head>

<body ng-controller="MyUserController">
  <div class="gridStyle" ng-grid="gridOptions"></div>
</body>

</html>

// Code goes here

/* Styles go here */