<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
    <script src="https://code.angularjs.org/1.4.0-beta.4/angular-route.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div class="app">
      <div class="app-body">
        <ng-view class="app-content"></ng-view>
      </div>
    </div>
  </body>
</html>
var mod = angular.module('myApp', ['ngRoute']);

//language service
mod.service('language', ['$log', '$q', function($log, $q) {
  var self = this;

    //function to load a set of translations for language code
    this.load = function(code) {
      $log.debug('language.load ' + code);

      //promise to load translations
      deferred = $q.defer();

      //promise.then forms promise chain
      self.translations = deferred.promise.then(function(translations) {
        $log.debug('translations resolved');

        //update translations when promise is resolved
        $log.debug('storing translations ' + angular.toJson(translations));
        self.translations = translations;
      });

      //mock async call to get translations
      setTimeout(function() {
        $log.debug('async call response recieved');
        var response;
        if (code == 'EN') {
          response = {
            ONE: 'one',
            TWO: 'two'
          };
        } else {
          response = {
            ONE: 'een',
            TWO: 'twee'
          };
        }

        //resolve the promise to load translations
        deferred.resolve(response);
      }, 3000);

      //return promise to resolve after translations is stored
      return self.translations;
    };

    //init language service
    $log.debug('init language service');
    var deferred = $q.defer();
    self.translations = deferred.promise;
  }
]);

mod.service('settings', ['$log', '$rootScope', 'language', function($log, $rootScope, language) {
  var self = this;

    //function to load settings from html storage and setup translation
    function load() {
      $log.debug('settings.load');

      //create scope for storage and watches
      var scope = $rootScope.$new();

      //mock using ngStorage to obtain settings from html local storage
      scope.settings = {
        lastId: 0,
        language: 'EN'
      };
      
      //load language
      language.load(scope.settings.language);

      //update and store language when it changes
      self.language = scope.settings.language;
      $log.debug('settings.language = ' + self.language);
      scope.$watch(function() {
        return self.language;
      }, function(newValue, oldValue) {
        if (angular.isDefined(newValue) && (newValue != oldValue)) {
          $log.debug('settings is loading language '+newValue);
          scope.language = newValue;
          language.load(newValue);
        }
      });

      //update and store lastId when it changes
      lastId = scope.settings.lastId;
      $log.debug('settings.lastId = ' + lastId);
      scope.$watch(function() {
        return lastId;
      }, function(newValue) {
        scope.language = language;
      });
    }

    //function to create persisted unique ids for events, locations and people
    this.createId = function() {
      settings.lastId += 1;
      return settings.lastId;
    };

    //init service
    $log.debug('init settings service')
    self.language;
    var lastId;
    load();
  }
]);

//configure app routes and init translations
mod.config(['$routeProvider',
  function($routeProvider) {
    console.log('configuring module');

    //create language router
    $routeProvider.when('/language', {
      controller: 'languageController',
      templateUrl: 'language.html',

      //prevent FOUC
      resolve: {
        translations: ['$q', '$log', 'language', 'settings',
          function($q, $log, language, settings) {
            $log.debug(language.translations);
            $q.when(language.translations).then(function(newValue) {
              $log.debug('route resolve translations resolved ' + angular.toJson(newValue));
            });
            return language.translations;
          }
        ]
      }
    });

    //default router is language
    $routeProvider.otherwise({
      redirectTo: '/language'
    });
  }
]);

mod.run(['$log',
  function($log) {
    $log.debug('running module');
  }
]);

//controller to connect view to translations
mod.controller('languageController', ['$log', '$scope', 'language', 'settings',
                                      function($log, $scope, language, settings) {
    $log.debug('init language controller');
    $log.debug(language);
    $scope.translations = function() {
      return language.translations;
    };
    $scope.settings = settings;
  }
]);
{{settings.language}}.ONE = <span ng-bind="translations().ONE"></span>
<br>
<select ng-model="settings.language"><option>EN</option><option>NL</option></select>
<a href="#home">home</a>