AngularJS directive to change ngGrid column defs when window resizes.

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <title>Resize ngGrid Columns</title>
    <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.8/angular.min.js"></script>
    <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
    <script src="script.js"></script>
    <script src="resizeGridColumns.js"></script>
  </head>

  <p>Resize the window to see the number of columns change. Change point is 700 pixels.</p>

  <body ng-controller="MyCtrl">
    <div class="gridStyle"
         ng-grid="gridOptions"
         resize-grid-columns="gridColumns"
         resize-grid-columns-set="gridColumnsSet">
      Window Width: {{windowWidth}}
    </div>
  </body>

</html>

// main.js
var app = angular.module('myApp', ['ngGrid']);

app.controller('MyCtrl', function($scope) {
    $scope.myData = [{name: "DJ Lance Rock", age: 35, email:"lance@yo.com", favoriteFood:"Oranges"},
                     {name: "Muno", age: 11, email:"muno@yo.com", favoriteFood:"Bananas"},
                     {name: "Foofa", age: 10, email:"foofa@yo.com", favoriteFood:"Rice"},
                     {name: "Brobee", age: 9, email:"brobee@yo.com", favoriteFood:"Applesauce"},
                     {name: "Toodee", age: 8, email:"toodee@yo.com", favoriteFood:"Toast"},
                     {name: "Plex", age: 3, email:"plex@yo.com", favoriteFood:"Oil"}];

    $scope.gridColumnsSet = {
      //All columns (for large screen)
      allColumns: [
        {field:'name', displayName:'Name'},
        {field:'age', displayName:'Age'},
        {field:'email', displayName:'Email'},
        {field:'favoriteFood', displayName:'Favorite Food'},
      ],
      //Columns for small screen
      smallColumns: [
        {field:'name', displayName:'Name'},
        {field:'favoriteFood', displayName:'Favorite Food'},
      ]
    };

    //Default to all columns
    $scope.gridColumns = $scope.gridColumnsSet.allColumns;

    $scope.gridOptions = { 
      data: 'myData',
      columnDefs: 'gridColumns'
    };
});

.gridStyle {
    border: 1px solid rgb(0,0,212);
    width: 100%; 
    height: 300px
}

app.directive('resizeGridColumns', function ($window) {

  function resizer(scope, element, attrs) {
    var w = angular.element($window);

    scope.getWidth = function () {
      return w.width();
    };

    scope.$watch(scope.getWidth, function (newValue, oldValue) {
      scope.windowWidth = newValue;
      
      var resizeGridColumnsWidth = scope.$eval(attrs.resizeGridColumnsWidth) || 700;
      var resizeGridColumnsSet = scope.$eval(attrs.resizeGridColumnsSet);

      if(newValue < resizeGridColumnsWidth) {
        scope.gridColumns = resizeGridColumnsSet.smallColumns;
      }
      else {
        scope.gridColumns = resizeGridColumnsSet.allColumns;
      }
    }, false);

    w.bind('resize', function () {
      scope.$apply();
    });
  }

  return {
    restrict: 'A',
    scope: { gridColumns: '=resizeGridColumns' },
    link: resizer
  };

});