We know Angular UI Grid is a part of Angular UI, so we have some facilities. We need to download/install package before we are going to use in our application.

To download the package, go to URL: http://ui-grid.info

Html code

    
    
    
    
    
    


    

        

        
{{gridOptions.data | json}}
    
    

AngularJS code snippet

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

app.controller('MainCtrl', ['$scope', '$http',
  function ($scope, $http) {

      $scope.genderTypes = [
          { ID: 1, type: 'Male' },
          { ID: 2, type: 'Female' },
          { ID: 3, type: 'Others' }
      ];

      $scope.gridOptions = {
          enableSorting: true,
          enableFiltering: true,
          enableCellEditOnFocus: true,

          columnDefs: [{
              field: 'name',
              sort: {
                  direction: 'desc',
                  priority: 1
              }
          },
          {
              field: 'gender',
              editType: 'dropdown',
              enableCellEdit: true,
              editableCellTemplate: 'ui-grid/dropdownEditor',
              editDropdownOptionsArray: $scope.genderTypes,
              editDropdownIdLabel: 'ID',
              editDropdownValueLabel: 'type',
              cellFilter: 'mapGender'
          },
          {
              field: 'company',
              enableSorting: false
          }],

          onRegisterApi: function (gridApi) {
              grid = gridApi.grid;
              gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
                  if (colDef.name === 'gender') {
                      for (var i = 0; i < $scope.genderTypes.length; i++) {
                          var item = $scope.genderTypes[i];
                          if (item.type === newValue) {
                              //item.type = NameField //item.ID = ValueField
                              $scope.gridOptions.gender = item.type;
                              break;
                          }
                      }
                  }
              });
          }
      };

      $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
        .success(function (data) {
            //$scope.gridOptions.data = data;
            $scope.gridOptions.data = [
                { "name": "Himel Habibullah", "gender": "1", "company": "Enersol" },
                { "name": "Shashangka Shekhar", "gender": "1", "company": "Sealoud" },
                { "name": "Claudine Neal", "gender": "3", "company": "Sealoud" },
                { "name": "Masum Billah", "gender": "1", "company": "Sealoud" },
                { "name": "Rita Aloka", "gender": "2", "company": "Sealoud" }
            ];
        });

  }
]);

Mapper to display Name filed

app.filter('mapGender', function () {
    var genderHash = {
        '1': 'Male',
        '2': 'Female',
        '3': 'Others'
    };

    return function (input) {
        if (!input) {
            return '';
        } else {
            return genderHash[input];
        }
    };
});

Output