title: How to load JSON array to translate AngularJS webpage with Angular-Translate
body: <p>I am still learning AngularJS heavily so pardon all my bad quality code/lack of knowledge. </p>
  
  <p><strong>What I want to do</strong></p>
  
  <p>I want to translate my webpage into 2 languages. It currently works when I translate static content using <em>Angular-Translate</em> in the <strong>index.html</strong>. Like this</p>
  
  <pre><code>function translateConfiguration($translateProvider) {
  
      $translateProvider.useSanitizeValueStrategy(null);
  
      $translateProvider.useStaticFilesLoader({
        files: [{
          prefix: '../JSON/locale-',
          suffix: '.json'
        }]
  });
  
  $translateProvider.preferredLanguage('en');
  $translateProvider.fallbackLanguage('en');
  </code></pre>
  
  <p>};</p>
  
  <p>I load my simple <strong>JSON files</strong> for EN and RU locales, structured like this</p>
  
  <pre><code>{
   "HEADING" : "Lorem",
   "TEXT" : "Ipsum"
  }
  </code></pre>
  
  <p>Then I access the variables through Angular-translate directive </p>
  
  <pre><code>&lt;h1 class="z-logo header-text md-display-1" translate="HEADING"&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p>All works as it should.</p>
  
  <p><strong><em>I want to be able to do the same with my custom directives and ng-repeat.</em></strong></p>
  
  <p><strong>The issue</strong></p>
  
  <p>I have multiple custom directives in my AngularJS website. For instance</p>
  
  <pre><code>&lt;about-card flex="33" flex-xs="100" flex-sm="100" class="center-content" ng-repeat="data in aboutCardCtrl.info"&gt;
  &lt;/about-card&gt;
  </code></pre>
  
  <p>Here is the template code that  loads through the custom directive and retrieves information from the JSON file </p>
  
  <pre><code>&lt;md-card class="card-bg card-height"&gt;
    &lt;md-card-title layout="column" class="about-card"&gt;
      &lt;md-card-title-media class="center-elements"&gt;
        &lt;img class="md-media-lg" ng-src="{{data.image}}" alt="{{data.imageAlt}}"/&gt;
      &lt;/md-card-title-media&gt;
      &lt;md-card-title-text&gt;
        &lt;div class="md-headline card-title-padding"&gt;{{data.heading}}&lt;/div&gt;
      &lt;/md-card-title-text&gt;
    &lt;/md-card-title&gt;
    &lt;md-card-content&gt;
      {{data.content | translate}}
    &lt;/md-card-content&gt;
  &lt;/md-card&gt;
  </code></pre>
  
  <p>Here is the <strong>directive</strong></p>
  
  <pre><code>(function() {
    'use strict'
  
    angular
      .module('webApp')
      .directive('aboutCard', aboutCard);
  
    function aboutCard() {
      return {
        restrict: 'EA',
        priority: 1001,
        templateUrl: '../TEMPLATES/about.html',
        controller: 'aboutCardController',
        controllerAs: 'aboutCardCtrl'
      };
    };
  })();
  </code></pre>
  
  <p>Here is the <strong>controller</strong></p>
  
  <pre><code>(function() {
    'use strict'
  
    angular
      .module('webApp')
      .controller('aboutCardController', aboutCardController);
  
    aboutCardController.$inject = ['JsonData', '$translate'];
  
    function aboutCardController(JsonData, $translate) {
      var vm = this;
  
      vm.pathToJson = '../JSON/about-en.json';
      vm.info = [];
  
      JsonData.all(vm.pathToJson).then(function(response) {
        vm.info = response.data.information;
      });
    };
  })();
  </code></pre>
  
  <p>Here is the <strong>JSON file</strong> </p>
  
  <pre><code>  {
        "information": [{
          "heading": "Reliability",
          "content": "Our partners have been working on the market for over 10 years",
          "image": "../IMG/shield.svg",
          "imageAlt": "Reliability Image"
        }, {
          "heading": "Professionalism",
          "content": "We are ready to provide profesional opinion for our clients to ensure the right choice",
          "image": "../IMG/people.svg",
          "imageAlt": "Professionalism Image"
        }, {
          "heading": "Development",
          "content": "Organization of educational programs in collaboration with our partners",
          "image": "../IMG/cogwheel.svg",
          "imageAlt": "Development Image"
        }]
      }
  </code></pre>
  
  <p>Here I suppose I lack the brainpower to understand how I can load my JSON files and switch between them in the custom directive with <code>ng-repeat</code>. Since The format of the JSON is different.</p>
  
  <p>I've been going through Angular-Translate wiki pages, but all examples feature only <em>index.html</em> and main <em>app.js</em> files and I hardly seem to be able to find/understand examples found in google search like these</p>
  
  <p><a href="https://technpol.wordpress.com/2013/11/02/adding-translation-using-angular-translate-to-an-angularjs-app/" rel="nofollow">https://technpol.wordpress.com/2013/11/02/adding-translation-using-angular-translate-to-an-angularjs-app/</a></p>
  
  <p><a href="https://github.com/angular-translate/angular-translate/issues/1154" rel="nofollow">https://github.com/angular-translate/angular-translate/issues/1154</a></p>