title: angular js - ajax call result needed in a service which is used by the controller
body: <p>I need a way to use a <code>json</code> retrieved data in a service which is used by a controller to populate it's template with the values returned from the service.</p>
  
  <p>What I'm trying to do over all is to populate templates with content of a selected language that will change on user selection(I'm far from that right now but this it's a step )</p>
  
  <p><strong>Controller</strong> </p>
  
  <pre><code>(function(){
  angular.module('myApp', [])
  .controller('meniuController', ['$http', '$stateParams', '$scope', 'GetDataService', 'PageProperties', 
              function($http, $stateParams, $scope, GetDataService, PageProperties){      
      var page = "meniu";
      var path = '_global/views/services/json/' + $stateParams.lang + '_data.json';
  
      GetDataService.getData(path).then(function(result){         
          $scope.props = PageProperties.setProps(page, result.data);
      });
  }])})();
  </code></pre>
  
  <p><strong>GetDataService</strong></p>
  
  <pre><code>(function(){
  angular.module('myApp').factory('GetDataService',['$http','$q' , function($http, $q) {
     return {
          getData: function(path) {
               return $http.get(path)
                         .then(function(result) {
                              return $q.when(result.data);
                          },
  
                    function (httpError) {
  
                       throw httpError.status + " : " + 
                             httpError.data;
                    });
          }
     }
  }]);})();
  </code></pre>
  
  <p><strong>PageProperties service</strong></p>
  
  <pre><code>(function(){
  angular.module('NimbusApp').service('PageProperties',['$http','GetDataService', function($http, GetDataService) {
  
      this.setProps = function(page, data) {                      
  
          //here I want to access returned data from getdataService
          var properties = {
                  isCenterActive : isActive_val,
                  titleClass : page, 
                  title : data.titles[page],
                  leftLink : leftLink_val,
                  leftFooterClass: leftLink_val,
                  leftTitle: data.titles[leftLink_val],
                  centerLink : centerLink_val,
                  centerFooterClass: data.titles[centerLink_val],
                  centerTitle : centerTitle_val,
                  rightLink : rightLink_val,
                  rightFooterClass: rightLink_val ,
                  rightTitle : data.titles[rightLink_val],            
              }
  
          return properties;
      }
  }]);})();
  </code></pre>
  
  <p>I get the following error</p>
  
  <blockquote>
    <p>angular-1.5.8.js:13920 SyntaxError: Unexpected token t in JSON at position 4
        at Object.parse (native)
        at fromJson (<a href="http://localhost:8080/_global/lib/js/angular-1.5.8.js:1333:14" rel="nofollow">http://localhost:8080/_global/lib/js/angular-1.5.8.js:1333:14</a>)
        at defaultHttpResponseTransform (<a href="http://localhost:8080/_global/lib/js/angular-1.5.8.js:10635:16" rel="nofollow">http://localhost:8080/_global/lib/js/angular-1.5.8.js:10635:16</a>)
        at <a href="http://localhost:8080/_global/lib/js/angular-1.5.8.js:10726:12" rel="nofollow">http://localhost:8080/_global/lib/js/angular-1.5.8.js:10726:12</a>
        at forEach (<a href="http://localhost:8080/_global/lib/js/angular-1.5.8.js:321:20" rel="nofollow">http://localhost:8080/_global/lib/js/angular-1.5.8.js:321:20</a>)
        at transformData (<a href="http://localhost:8080/_global/lib/js/angular-1.5.8.js:10725:3" rel="nofollow">http://localhost:8080/_global/lib/js/angular-1.5.8.js:10725:3</a>)
        at transformResponse (<a href="http://localhost:8080/_global/lib/js/angular-1.5.8.js:11577:21" rel="nofollow">http://localhost:8080/_global/lib/js/angular-1.5.8.js:11577:21</a>)
        at processQueue (<a href="http://localhost:8080/_global/lib/js/angular-1.5.8.js:16383:28" rel="nofollow">http://localhost:8080/_global/lib/js/angular-1.5.8.js:16383:28</a>)
        at <a href="http://localhost:8080/_global/lib/js/angular-1.5.8.js:16399:27" rel="nofollow">http://localhost:8080/_global/lib/js/angular-1.5.8.js:16399:27</a>
        at Scope.$eval (<a href="http://localhost:8080/_global/lib/js/angular-1.5.8.js:17682:28)(anonymous" rel="nofollow">http://localhost:8080/_global/lib/js/angular-1.5.8.js:17682:28)(anonymous</a> function) @ angular-1.5.8.js:13920(anonymous function) @ angular-1.5.8.js:10467processQueue @ angular-1.5.8.js:16391(anonymous function) @ angular-1.5.8.js:16399$eval @ angular-1.5.8.js:17682$digest @ angular-1.5.8.js:17495$apply @ angular-1.5.8.js:17790done @ angular-1.5.8.js:11831completeRequest @ angular-1.5.8.js:12033requestLoaded @ angular-1.5.8.js:11966</p>
  </blockquote>
  
  <p>And the thrown exception</p>
  
  <blockquote>
    <p>angular-1.5.8.js:13920 undefined : undefined</p>
  </blockquote>
  
  <p>Is this the correct way to do it? Because seems like the template is rendered with no values before the success result of getDataService</p>