ng-grid custom filter textbox

<!DOCTYPE html>
<html ng-app="myApp">
    <head lang="en">
        <meta charset="utf-8">
        <title>Custom Plunker</title>  
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.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 type="text/javascript" src="main.js"></script>
    </head>
    <body ng-controller="MyCtrl">
    <div class="input-append btn-block btn-flat">
           Cells with red background need to be changed to contain only 40 characters.
        </div>
      <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>
</html>

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
  $scope.filterOptions = {
    filterText: ''
  };
    
  $scope.myData = [
    {
        "name": "ANADA",
        "abbrev": "ANADA",
        "isValid": "Valid"
    },
    {
        "name": "ANDA",
        "abbrev": "ANDA",
        "isValid": "Valid"
    },
    {
        "name": "APPROV DRUG PROD MAN FOR PRIV LABEL DIST",
        "abbrev": "APPROV DRUG PROD MAN FOR PRIV LABEL DIST",
        "isValid": "INVALID"
    },
    {
        "name": "APPROVED DRUG PRODUCT MANUFACTURED EXCLUSIVE",
        "abbrev": "APPROVED DRUG PRODUCT MANUFACTURED EXCLUSIVE",
        "isValid": "INVALID"
    },
    {
        "name": "BLA",
        "abbrev": "BLA",
        "isValid": "VALID"
    },
    {
        "name": "BULKING FOR HUMAN PRESCRIP CMPD",
        "abbrev": "BULKING FOR HUMAN PRESCRIP CMPD",
        "isValid": "VALID"
    },
    {
        "name": "BULK INGREDIENT",
        "abbrev": "BULK INGREDIENT",
        "isValid": "VALID"
    },
    {
        "name": "BULK INGREDIENT FOR DRUG COMPOUNDING",
        "abbrev": "",
        "isValid": "INVALID"
    },
    {
        "name": "BULK INGREDIENT FOR ANIMAL PRESCRIPTION COMPOUNDING",
        "abbrev": "",
        "isValid": "INVALID"
    },
    {
        "name": "BULK INGREDIENT FOR HUMAN PRESCRIPTION COMPOUNDING",
        "abbrev": "BULK INGREDIENT FOR HUMAN PRESCRIPTION COMPOUNDING",
        "isValid": "INVALID"
    },
    {
        "name": "COSMETIC",
        "abbrev": "COSMETIC",
        "isValid": "VALID"
    },
    {
        "name": "DIETARY SUPPLEMENT",
        "abbrev": "DIETARY SUPPLEMENT",
        "isValid": "VALID"
    },
    {
        "name": "DRUG FOR FURTHER PROCESSING",
        "abbrev": "DRUG FOR FURTHER PROCESSING",
        "isValid": "VALID"
    },
    {
        "name": "DRUG FOR FURTHER PROCESSING",
        "abbrev": "DRUG FOR FURTHER PROCESSING",
        "isValid": "VALID"
    },
    {
        "name": "DRUG FOR FURTHER PROCCESSING",
        "abbrev": "DRUG FOR FURTHER PROCCESSING",
        "isValid": "VALID"
    },
    {
        "name": "DRUG FOR FURTHER PROCCESSING",
        "abbrev": "DRUG FOR FURTHER PROCCESSING",
        "isValid": "VALID"
    },
    {
        "name": "EXEMPT DEVICE",
        "abbrev": "EXEMTP DEVICE",
        "isValid": "VALID"
    },
    {
        "name": "EXPORT ONLY",
        "abbrev": "EXPORT ONLY",
        "isValid": "VALID"
    },
    {
        "name": "IND",
        "abbrev": "IND",
        "isValid": "VALID"
    },
    {
        "name": "LEGALLY MARKETED UNAPPROVED NEW ANIMAL DRUGS",
        "abbrev": "LEGALLY MARKETED UNAPPROVED NEW ANIMAL DRUGS",
        "isValid": "INVALID"
    },
    {
        "name": "MEDICAL FOOD",
        "abbrev": "MEDICAL FOOD",
        "isValid": "VALID"
    },
    {
        "name": "NADA",
        "abbrev": "NADA",
        "isValid": "INVALID"
    }
]

var cellTemp = "<div class=\"ngCellText\" ng-class=\"col.colIndex()\"><span ng-cell-text update-fda-on-blur ng-model='someVals'>{{row.getProperty(col.field)}}<\/span><\/div>";
    var cellTempValid = "<div class=\"ngCellText\" ng-class=\"col.colIndex()\"><span ng-cell-text update-fda-on-blur ng-model='someVals'>{{row.getProperty(col.field)}}<\/span><\/div>";
    var cellTempAbbrev = '<div ng-class="{errorRed: row.getProperty(col.field).length > 40}"><div class="ngCellText"><span  ng-cell-text update-fda-on-blur ng-model="someVals">{{row.getProperty(col.field)}} <span style="float:right;" ng-show="row.getProperty(col.field).length > 40" class="cellInstrText">(40 Char. Max. Click to abbreviate.)</span><\/span></div></div>';

                   
  $scope.gridOptions = {
            columnDefs: [
            {
                field: 'name',
                displayName: 'Market Category Name',
                cellTemplate: cellTemp,
                enableCellEdit: false
            },
            {
                field: 'abbrev',
                displayName: 'Market Category Abbr',
                cellTemplate: cellTempAbbrev,
                width: 750,
                editableCellTemplate:  '<input ng-class="\'colt\' + col.index" ng-input="COL_FIELD" value= "{{row.getProperty(col.field)}}" data-ng-maxlength="40" maxlength = "40"/>'
            },
            {
                field: 'isValid',
                displayName: 'Valid / InValid',
                cellTemplate: cellTempValid,
                enableCellEdit: true
            }

        ],
        data: 'myData',
        showFilter: true,
        multiSelect: false,
        enableRowSelection: false,
        headerRowHeight: 55,
        rowHeight: 50,
        enableCellSelection: true,
        enableCellEdit: true,
        enableColumnResize: true,
        enableCellEditOnFocus: true
  };
    
});

/*style.css*/
body {
  margin: 15px;
}

.gridStyle {
    border: 1px solid rgb(212,212,212);
    height: 1200px;
    margin-top: 10px;
}

.errorRed {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
    height: 50px;
}

.cellInstrText {
	font-size: 11px;
}