title: Angular Ui grid Coloumndefs bug
body: <p><strong>When i am using the following code, this is working fine</strong></p>
  
  <pre><code>     &lt;!doctype html&gt;
       &lt;html ng-app="app"&gt;
   &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"&gt;&lt;/script&gt;
  &lt;script src="ht tp://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"&gt;&lt;/script&gt;
  &lt;script src="http://ui-grid.info/docs/grunt-scripts/csv.js"&gt;&lt;/script&gt;
  &lt;script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"&gt;&lt;/script&gt;
  &lt;script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"&gt;&lt;/script&gt;
  &lt;script src="http://ui-grid.info/release/ui-grid-unstable.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css"&gt;
  &lt;link rel="stylesheet" href="main.css" type="text/css"&gt;
   &lt;/head&gt;
   &lt;body&gt;
  
   &lt;div ng-controller="MainCtrl"&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;div id="grid1" ui-grid="gridOptions" class="grid"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;style type="text/css"&gt;
           .grid {
     width: 500px;
      height: 200px;
      }
    .red { color: red;  background-color: yellow !important; }
     .blue { color: blue;  }
  
      &lt;/style&gt;
  
    &lt;script&gt;   
   var app = angular.module('app', ['ui.grid']);
        app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http)     {
  
          $scope.gridOptions = {
              enableSorting: true,
              columnDefs: [
            { field: 'name', cellClass: 'red' },
            { field: 'company',
                cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                    if (grid.getCellValue(row, col) === 'Velity') {
                        return 'blue';
                    }
                }
            }
          ];
          };
          $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
          .success(function (data) {
              $scope.gridOptions.data = data;
          });
      } ]);
  
  
     &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>When I was using Columndefs as a variable, this is not working?</strong>
  <strong>Is this a bug in angular ui grid</strong></p>
  
  <pre><code>    &lt;!doctype html&gt;
      &lt;html ng-app="app"&gt;
      &lt;head&gt;
      &lt;script    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"&gt;&lt;/script&gt;
     &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"&gt;   &lt;/script&gt;
     &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"&gt; &lt;/script&gt;
     &lt;script src="http://ui-grid.info/docs/grunt-scripts/csv.js"&gt;&lt;/script&gt;
   &lt;script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"&gt;&lt;/script&gt;
   &lt;script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"&gt;&lt;/script&gt;
   &lt;script src="http://ui-grid.info/release/ui-grid-unstable.js"&gt;&lt;/script&gt;
   &lt;link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css"&gt;
    &lt;link rel="stylesheet" href="main.css" type="text/css"&gt;
   &lt;/head&gt;
    &lt;body&gt;
  
    &lt;div ng-controller="MainCtrl"&gt;
   &lt;br&gt;
   &lt;br&gt;
   &lt;div id="grid1" ui-grid="gridOptions" class="grid"&gt;&lt;/div&gt;
   &lt;/div&gt;
    &lt;style type="text/css"&gt;
        .grid {
    width: 500px;
    height: 200px;
    }
   .red { color: red;  background-color: yellow !important; }
   .blue { color: blue;  }
  
    &lt;/style&gt;
  
  &lt;script&gt;        var app = angular.module('app', ['ui.grid']);
        app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http)    {
            $scope.cv = [
            { field: 'name', cellClass: 'red' },
            { field: 'company',
                  cellClass: function (grid, row, col, rowRenderIndex, colRenderIndex) {
                    if (grid.getCellValue(row, col) === 'Velity') {
                        return 'blue';
                    }
                }
            }
          ];
          $scope.gridOptions = {
              enableSorting: true,
              columnDefs: 'cv'
          };
          $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
          .success(function (data) {
              $scope.gridOptions.data = data;
          });
      } ]);
  
  
  &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p><strong>Guys if you know, then please help me</strong>
  I was making a dynamic templates using angular ui grid, And I got this type of silly error very soon.
  I was thinking that adding dynamic validation in angular grid fields would be the challenging task, but i never thought that i will get this type of error.</p>