<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Example - example-example52-production</title>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.1/angular-material.min.css">
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-app="myApp">
    <div ng-controller="appCtrl as appCtrl">
      <md-checkbox ng-repeat="doll in appCtrl.enums.dolls"
                    ng-model="doll.selected">
        {{doll.value}}
      </md-checkbox>
      
      Selected Dolls:
      <md-list layout="column">
        <md-item ng-repeat="doll in appCtrl.enums.dolls|filter:{selected: true}">
          {{doll.value}}
        </md-item>
      </md-list>
      
      <md-select ng-model="appCtrl.favorites.doll">
        <md-option ng-repeat="item in 'dolls'|enumsListFilter:'id':'value'"
                    ng-value="item.id">
          {{item.value}}
        </md-option>
      </md-select>
      
      <div>
        My Favorite doll: {{appCtrl.favorites.doll|enumsFilter:'dolls'}}
      </div>
      
      <md-select ng-model="appCtrl.favorites.digitalGame">
        <md-option ng-repeat="item in 'digitalGames'|enumsListFilter:'id':'value'"
                    ng-value="item.id">
          {{item.value}}
        </md-option>
      </md-select>
      
      <div>
        My Favorite digital game: {{appCtrl.favorites.digitalGame|enumsFilter:'digitalGames'}}
      </div>
      
      <div ui-grid="appCtrl.gridOptions"></div>
    </div>
    <script data-require="lodash.js@*" data-semver="3.8.0" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-aria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.1/angular-material.min.js"></script>
    <script src="app.js"></script>
  </body>

</html>
"use strict";
    
  var myModule = angular.module('myApp', ['ui.grid', 'ngAria', 'ngMaterial', 'ngAnimate']);
  
  myModule.controller('appCtrl', appCtrl);
  
  myModule.filter('enumsFilter', function(enums){
    return function(eNumber, enumCategory){
      if (angular.isUndefined(eNumber)) return '';
      return _.trunc(enums[enumCategory]?angular.isDefined(enums[enumCategory][eNumber])?enums[enumCategory][eNumber]:enumber:enumber, 12);
    }
  });
  
  myModule.filter('enumsListFilter', function(enums){
    return function(enumCategory, keyLabel, valueLabel){
      if (angular.isUndefined(keyLabel)){
        keyLabel = 'id';
      }
      
      if (angular.isUndefined(valueLabel)){
        valueLabel = 'value';
      }
      
      return _.map(enums[enumCategory], function(value, key){
        var retVal = {};
        retVal[keyLabel] = key;
        retVal[valueLabel] = value;
        return retVal;
      });
    }
  });
  
  myModule.value('enums', {
    dolls: {
      0: 'Barbi',
      1: 'Ken',
      2: 'Dora',
      3: 'Spiderman'
    },
    digitalGames: {
      0: 'Pacman',
      1: 'Mario Brothers',
      2: 'King\'s Quest',
      3: 'Defenders of the Crown'
    }
  });
  
  function appCtrl($filter, enums){
    this.enums = {};
    this.favorites = {};
    this.enums.dolls = $filter('enumsListFilter')('dolls');
    
    this.enumsValue = enums;
    
    this.gridOptions = {
      columnDefs: [
          {
            displayName: 'Regular string field',
            field: 'someString'
          },
          {
            displayName: 'Dolls',
            field: 'dolls',
            cellFilter: "enumsFilter:'dolls'"
          },
          {
            displayName: 'Digital Games',
            field: 'digitalGames',
            cellTemplate: '<div\
                            class="ui-grid-cell-contents"\
                            title="TOOLTIP">\
                            {{COL_FIELD | enumsFilter:col.colDef.field}}\
                          </div>'
          }
        ],
        data: [
          {
            someString: 'Hello',
            dolls: 1,
            digitalGames: 2
          },
          {
            someString: 'Hi',
            dolls: 2,
            digitalGames: 0
          },
          {
            someString: 'Bye',
            dolls: 0,
            digitalGames: 3
          }
        ]
    };
    
    
  }
 
.cesiumContainer{
  height: 50%;
  width: 100%;
}