UI grid appScope issue

var app = angular.module('app', ['ui.grid', 'ui.grid.edit', 'ui.grid.cellNav']);

app.filter('genderFilter', function() {
  return function(id, map) {
    console.log(map);
    // search in 'map' array for our ID and return the value
    var result = null;
    map.some(function(el, i) {
      return (el.id === id) ? ((result = el), true) : false;
    });
    return result.value;
  }
});

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.gridOptions = {};

  // custom drop down options just for the sake of example
  $scope.genderDropDownOptions = [{
    id: 1,
    value: 'Big bad wolf'
  }, {
    id: 2,
    value: 'Angry Rose Red'
  }];

  $scope.gridOptions.columnDefs = [{
    name: 'id',
    enableCellEdit: false
  }, {
    name: 'name',
    displayName: 'Name (editable)'
  }, {
    name: 'gender',
    editableCellTemplate: 'ui-grid/dropdownEditor',
    editDropdownOptionsArray: $scope.genderDropDownOptions,
    cellFilter: 'genderFilter:grid.appScope.genderDropDownOptions'
  }];

  $http.get('data.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
    });
}]);

.grid {
  width: 600px;
  height: 450px;
}

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.5/ui-grid.js"></script>
    <link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.5/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-edit ui-grid-cellNav class="grid"></div>
</div>


    <script src="app.js"></script>
  </body>
</html>

[
 {
   "id":0,
   "name": "Person 1",
   "gender": 1
 },
 {
   "id":1,
   "name": "Person 2",
   "gender": 2
 },  
 {
   "id":2,
   "name": "Person 3",
   "gender": 1
 }  
]