<!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="ngCesium">
    <div ng-controller="appCtrl as appCtrl">
      <div cesium-directive="" id="cesium1" class="cesiumContainer"></div>
      <div cesium-directive="" id="cesium2" class="cesiumContainer"></div>
    </div>
    <script src="app.js"></script>
  </body>

</html>
"use strict";
    
    // define the ngCesium module
  angular.module('ngCesium', [])
    //define the cesium directive
  .directive('cesiumDirective', function($interval){
    // return the directive definition object
    return {
      restrict: "EA",
      controllerAs: "cesiumCtrl",
      scope: {
        data: "="
      },
      controller: function($scope){
        
      },
      // define the "link" function
      link: function(scope, element, attr, ctrl){
        
        ctrl.cesium = new Cesium.Viewer(element[0], {
          baseLayerPicker: false,
          fullscreenButton: false,
          homeButton: false,
          sceneModePicker: false,
          selectionIndicator: false,
          timeline: false,
          animation: false,
          geocoder: false
        });
        
        
        //Grand Island, Nebraska in radians
        var startingLocation = {
            centerLong: (-98.343286 * Math.PI / 180),
            centerLat: (40.923664 * Math.PI / 180)
        };
        
        ctrl.cesium.camera.flyTo({
            destination: new Cesium.Cartesian3.fromDegrees(startingLocation.centerLong * 180/Math.PI, startingLocation.centerLat * 180/Math.PI, 5000000)
        });
        
        ctrl.cesium.entities.add({
          position: new Cesium.Cartesian3.fromDegrees(startingLocation.centerLong * 180/Math.PI, startingLocation.centerLat * 180/Math.PI, 500),
          point: {
            pixelSize: 32
          }
        });
      }
    };
  })
  
  .controller('appCtrl', ['$scope', function($scope) {
    
  }]);
.cesiumContainer{
  width: 50%;
  height: 100%;
  float: left;
}