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

  <head>
    <meta charset="UTF-8" />
    <title>Example - example-example52-production</title>
    <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[0]"
                    ng-model="doll.selected">
        {{doll.value}}
      </md-checkbox>
      
      Selected Dolls:
      <md-list layout="column">
        <md-item ng-repeat="doll in appCtrl.enums[0]|filter:{selected: true}">
          {{doll.value}}
        </md-item>
      </md-list>
    </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="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', ['ngAria', 'ngMaterial', 'ngAnimate']);
  
  myModule.controller('appCtrl', appCtrl);
  
  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(enums){
    this.enums = _.map(enums, function(items){
      return _.map(items, function(item, key){
        return {id: key, value: item};
      })
    });;
  }
 
.cesiumContainer{
  height: 50%;
  width: 100%;
}