how to load config file to an angular Object

Question

how to load config file to an angular Object

I have a simple config page set up on my nodeJS server.

4 inputfields to store some IPs.

those fields are bound to

var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
    $scope.formData = {};
    loadConfig();                          
    $scope.$watchCollection('formData',function() {
        saveConfig($scope);
    });
});

Every change in the model calls the saveConfig(), which saves the config on the server:

function saveConfig($scope) {
    socket.emit('save_config', {config: $scope.formData});
}

This seems to work. The Server correctly prints the content of the received object and there is no error in the saving process.

Now i want to LOAD the config into the angular Model, everytime the page is opened.

loadConfig() tells the server to load the config.json, parse it, and send it to the browser:

socket.on('load_config', function(data) {
    console.log("[INFO] Config received:");
    angular.element(document.getElementById('config')).scope().formData = data;
});

but it doesn't seem to work.. on page refresh, all the fields are empty.

besides, $scope.formData = {}; empties the object, so the config is immediately overwritten. how can i prevent this? (i don't know if this is actually the whole problem) Is there anything terribly wrong with my approach?

Thanks

UPDATE:

It seems not to be completely wrong... on refresh, the inputs are empty, but if i start typing and console.log the formData Object, it seems to have loaded the values in a weird, nested way

{"config":{"config":{"config":{"config":{},"ip2":"tzfrzftztrf","ip3":"ztu6tzzt6"},"ip2":"hhhkkizbi"},"ip2":"hhkkkkööö"},"ip3":"h"}

this was 4 refreshes. So it seems to work somehow, but not load it correctly

javascript
angularjs
node.js
socket.io
fs

Answer 1

You can create service for loading configuration and inject it you module like

var formApp = angular.module('formApp', [])
formApp.service('LoadConfigService', function($http) {
   return({
      loadConfig: function() {
      var promise = $http.get('config.json').then(function (response) {
        return response.data;
      });

      return promise;
    }});
});
.controller('formController', function($scope,LoadConfigService) {
    $scope.formData = {};
    LoadConfigService.loadConfig().then(function(data) {
   //Action After response
  });                         
    $scope.$watchCollection('formData',function() {
        saveConfig($scope);
    });
});