ngCesium - part 2 - ngCesium base module

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

  <head>
    <meta charset="UTF-8" />
    <title>Example - example-example52-production</title>
    <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.0/angular.min.js"></script>
    <script src="http://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>
    <script src="http://stepplus.co.il/images/svg2png.js"></script>
    <link rel="stylesheet" href="http://cesiumjs.org/Cesium/Build/CesiumUnminified/Widgets/widgets.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-app="myApp">
    <div ng-controller="mainAppCtrl as mainAppCtrl">
      <div 
        cesium-directive="mainAppCtrl.cesiumConfigs[0]" 
        cesium-buttons
        id="cesium1" class="cesiumContainer">
        
      </div>
      
      <div 
        cesium-directive="mainAppCtrl.cesiumConfigs[1]" 
        cesium-buttons
        id="cesium2" class="cesiumContainer">
        
      </div>
    </div>
    <script src="app.js"></script>
  </body>

</html>

"use strict";
    
    
  angular.module('myApp', ['ngCesium', 'ngCesiumButtons'])
  .controller('mainAppCtrl', ['$scope', function($scope){
    var vm = this;
    
    // config variable in the main controller context
    vm.cesiumConfigs = [
      {},
      {}
    ];
  }]);
  
    // other app stuff can come here - like routing, more directives and services
    
    
  // define the ngCesium module
  angular.module('ngCesium', [])
    //define the cesium directive
  .directive('cesiumDirective', function($interval, cesiumService){
    // return the directive definition object
    return {
      restrict: "EA",
      controllerAs: "cesiumCtrl",
      priority: 500,
      scope: {
        cesiumDirective: "="
      },
      bindToController: true,
      controller: function($scope, $element){
        this.cesiumViewer = new Cesium.Viewer($element[0], {
          baseLayerPicker: false,
          fullscreenButton: false,
          homeButton: false,
          sceneModePicker: false,
          selectionIndicator: false,
          timeline: false,
          animation: false,
          geocoder: false
        });
        
        // this makes sure our parent app gets its cesiumInstance back
        this.cesiumDirective.cesiumInstance = new cesiumService(this.cesiumViewer);
      },
      // define the "link" function
      link: function(scope, element, attr, ctrl){
        
      }
    };
  })
    // define the cesium factory
  .factory('cesiumService', function(){
    // constructor
    function cesiumService(viewer){
      this._viewer = viewer;
    };
    
    cesiumService.prototype = {
      addEntity: function addEntity(options){
        this._viewer.entities.add(options);
      },
      removeEntity: function removeEntity(id){
        this._viewer.entities.removeById(id);
      }
    }
    
    return cesiumService;
  })
  .controller('cesiumCtrl', ['$scope', function($scope) {
    
  }]);
  
  // define the ngCesiumButtons module (dependant on ngCesium)
  angular.module('ngCesiumButtons', ['ngCesium'])
  // add templates into cache
  .run(function($templateCache){
    // cache our buttons template
    $templateCache.put('ngCesium/cesiumButtons', 
    '<div class="cesiumButtonsWrapper">\
    {{cesiumButtonsCtrl.test}}\
      <button ng-click="cesiumButtonsCtrl.cesiumButtonsInstance.addEntity()">Add Entity</button>\
      <button ng-disabled="!cesiumButtonsCtrl.cesiumButtonsInstance.ngCesiumInstance._viewer.entities.values.length" \
      ng-click="cesiumButtonsCtrl.cesiumButtonsInstance.removeEntity()">Remove Entity</button>\
    </div>')
  })
  .directive('cesiumButtons', function(cesiumButtonsService, $compile){
    return {
      restrict: 'A',
      priority: -500,
      require: 'cesiumDirective',
      link: function(scope, element, attr, ctrl){
        // create an isolate scope for this directive
        var isoScope = scope.$new(true);
        
        // add parent's controller to the scope
        isoScope.cesiumButtonsCtrl = ctrl;
        
        // create a cesiumButtonsInstance and add it to our controller
        isoScope.cesiumButtonsCtrl.cesiumButtonsInstance = new cesiumButtonsService(ctrl.cesiumDirective.cesiumInstance);
        
        // get the template using our API
        var template = isoScope.cesiumButtonsCtrl.cesiumButtonsInstance.getTemplate();
        
        // turn the template into an angular element
        template = angular.element(template);
        
        // compile the template
        template = $compile(template)(isoScope);
        
        // inject into the DOM just below the cesium viewer
        element.append(template);
      }
    }
  })
  .factory('cesiumButtonsService', function($templateCache){
    // constructor
    function cesiumButtonsService(ngCesiumInstance){
      this.ngCesiumInstance = ngCesiumInstance;
      ngCesiumInstance.cesiumButtons = this;
    };
    
    cesiumButtonsService.prototype = {
      getTemplate: function(){
        return $templateCache.get('ngCesium/cesiumButtons');
      },
      addEntity: function(){
        var options = {
          id: _.uniqueId('entity_'),
          point: {
            pixelSize: 32
          },
          position: new Cesium.Cartesian3.fromDegrees((98+Math.random()*5) * 180/Math.PI, (47+Math.random()*5) * 180/Math.PI, 500)
        }
        this.ngCesiumInstance.addEntity(options);
      },
      removeEntity: function(){
        var entityId = this.ngCesiumInstance._viewer.entities.values[_.random(0, this.ngCesiumInstance._viewer.entities.values.length-1)].id;
        this.ngCesiumInstance.removeEntity(entityId);
      }
    }
    
    return cesiumButtonsService;
  })

.cesiumContainer{
  height: 50%;
  width: 100%;
}