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.

HTML Code

<td valign="top">
     <label>Recursive</label>
</td>
<td valign="top">
      <input type="checkbox" ng-model="eventadd.md_eventrecursive"
      ng-true-value="true" ng-false-value="false">
</td>
<div ng-show="eventadd.md_eventrecursive">
      <div ui-grid="gridRecursiveEvent" class="gridSmallStyle"></div>
</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