Get JSON before directive starts working

var app = angular.module('app', []);

app.directive('someDirective', ['$log', 'someService', function($log, someService){
  return {
    restrict: 'E',
    controllerAs: 'someDirective',
    controller: function($scope, $element){
      var vm = this;
      
      vm.init = function init(data){
        var config = data.data;
        Cesium.BingMapsApi.defaultKey = config.bingAPIKey;
        var viewer = new Cesium.Viewer($element[0]);
      }
      
      someService.getConfig().then(vm.init);
      
    }
  }
}]);

app.service('someService', ['$q', '$log', '$http', function($q, $log, $http){
  var myService = {
    getConfig: function getConfig(){
      return $http.get('config.json').
        success(function(data, status, headers, config) {
          appData = data;
        }).
        error(function(data, status, headers, config) {
          // log error
        });
    }
  }
  
  return myService;
}]);

app.controller('MainCtrl', ['$scope', 'someService', function ($scope, someService) {
  
  var vm = this;
}]);

.grid {
  width: 600px;
}

.hovered{
  outline: red 2px solid;
}

<!doctype html>
<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="https://cesiumjs.org/releases/1.21/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="https://cesiumjs.org/releases/1.21/Build/Cesium/Widgets/widgets.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
    
  </head>
  <body>

<div ng-controller="MainCtrl as ctrl">
  <some-directive></some-directive>
</div>


    <script src="app.js"></script>
  </body>
</html>

{
  "bingAPIKey": "AroazdWsTmTcIx4ZE3SIicDXX00yEp9vuRZyn6pagjyjgS-VdRBfBNAVkvrucbqr",
  "mapUrl": null
}