ng-grid search filter with radio buttons

var plunker = angular.module('plunker',['ngGrid']);

function MainCtrl($scope) {

    $scope.campaigns = [
        {"name": "Achievement",  "channel": "Print", "category" :"Add"},
        {"name": "Best Ever",    "channel": "Print","category" :"Edit"},
        {"name": "Best Ever",    "channel": "TV","category" :"Delete"},
        {"name": "Cooperation",  "channel": "Print","category" :"Add"},
        {"name": "Daring",       "channel": "TV","category" :"Add"},
        {"name": "Extravagance", "channel": "Print","category" :"Add"},
        {"name": "Extravagance", "channel": "Social","category" :"Add"},
        {"name": "Extravagance", "channel": "Email","category" :"Edit"},
        {"name": "Extravagance", "channel": "TV","category" :"Edit"},
        {"name": "Extravagance", "channel": "Out of Home","category" :"Delete"},
        {"name": "Finesse",      "channel": "Print","category" :"Edit"},
        {"name": "Finesse",      "channel": "Print","category" :"Edit"},
        {"name": "Inspiration",  "channel": "Print","category" :"Edit"},
        {"name": "Inspiration",  "channel": "Social","category" :"Edit"},
        {"name": "Inspiration",  "channel": "Email","category" :"Edit"}
    ];

    
    $scope.orderProp = 'name';
    $scope.filterOptions={
      filterText : ''
    };
    $scope.gridOptions = {
        data: 'campaigns',
        enableRowSelection: false,
        enableSorting: true,
        enablePaging: true,
        rowHeight: 36,
        filterOptions : {
          filterText : ''
        },
        headerRowHeight: 60,
        columnDefs: [{field : 'category', cellTemplate :'<div class="ngCellText" style="height:30px" ></div>'},
                     { field: 'name',       displayName: 'Campaign' },
                     { field: 'channel',    displayName: 'Channel' }
        ],
    };
    
    $scope.filteringText = '';
    //$scope.gridOptions.filterOptions.filterText = 'category : ' +$scope.filteringText;
    
    $scope.$watch('search', function(searchText) {
        // if (searchText) {
        //   // console.log(searchText);
        //       var searchQuery = 'category:' + searchText + ';';
        //       //alert(searchText);
        //       if(searchText.length ===0){
        //         //console.log(searchText);
        //         $scope.gridOptions.filterOptions.filterText = '';
        //       }else{
        //         $scope.gridOptions.filterOptions.filterText = searchQuery;
        //       }
             
        //       console.log(searchQuery);
        // }
        
    });
    
    $scope.$watch('filteringText',function(newVal){
      $scope.gridOptions.filterOptions.filterText = 'category : ' + newVal;
    });
}

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
  <link rel="stylesheet" href="style.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.5/angular.js"></script>
  <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="radio" ng-model="filteringText" value="" /> All
<input type="radio" ng-model="filteringText" value="Add" /> Add
<input type="radio" ng-model="filteringText" value="Edit" /> Edit
<input type="radio" ng-model="filteringText" value="Delete" /> Delete
  <div ng-grid="gridOptions"></div>
</body>
</html>

/* Put your css in here */

.ngViewport {
    height: 541px !important;
    outline: 0;
}