angularjs - ui-grid の表示内容を変更するには?

Question

私はangulrjsプロジェクトでuigridを使用しています:

表示するコンテンツは次のとおりです。

   $scope.arr = [{id:'124',name:'Max',  IsMale:'true'}, 
                  {id:'589',name:'Anna', IsMale:'false'}, 
                  {id:'45',name:'Donna', IsMale:'false'},
                  {id:'567',name:'Mark', IsMale:'true'}];

UI-GRID の定義は次のとおりです。

    $scope.gridOptions = {
        enableColumnMenus: false,
        enableSorting: true,
        enableFiltering: false,
        enableToopTip: true,
        enableHorizontalScrollbar: 0,
        onRegisterApi: function (gridApi) {
            gridApi = gridApi
        }
    }

  $scope.gridOptions.columnDefs = [
    { name: 'Name ', field: 'name', cellTooltip: true, headerTooltip: true },
    { name: 'Id ', field: 'id', cellTooltip: true, headerTooltip: true },
    { name: 'IsMail ', field: 'IsMale', cellTooltip: true, headerTooltip: true }];

     $scope.gridOptions.data = $scope.arr;

テンプレートは次のとおりです。

 <div id="grid1" ui-grid="gridOptions" class="grid"></div>

これが動作するplunkerです。

IsMalフィールドが「true」を示す ui-gridのフィールドの表示内容を変更したい場合は、「はい」を表示する必要があり、false を「いいえ」と表示する必要があります。

ui-grid フィールドに表示されるコンテンツを変更するにはどうすればよいですか?