How to Hide and Show UI Grid with Columns based on input

I am using Angular UI Grid. I want to show UI Grid based on checkbox input. I am able to hide and show grid based on checkbox but never able to show columns in UI Grid.


<td valign="top">
<td valign="top">
      <input type="checkbox" ng-model="eventadd.md_eventrecursive"
      ng-true-value="true" ng-false-value="false">
<div ng-show="eventadd.md_eventrecursive">
      <div ui-grid="gridRecursiveEvent" class="gridSmallStyle"></div>

JS Code

$scope.gridRecursiveEvent = {
        columnDefs: [
                field: 'Name', displayName: 'Name'
                field: 'Id', displayName: 'Id',

When Recursive event is checked then it showing Grid but with no Columns

enter image description here

Need your help.

Source: AngularJS