Angular-translate : How can I refresh content (api request) when I change language?

Question

I'm new in AngularJS and I try to understand how to use it. I'm using angular-translate to translate my website and it works but I have a problem with the dynamic content from the database.

I get the dynamic content by an api request. I would like to "redo" the request with the good language to get the content reloaded in the good language.

I catch the "translateChangeSuccess" event but how can I "redo" the previous api request ?

Thank you very much for your help :) ps : sorry for my english

Edit :

// my run block :

(function ()
{
    'use strict';

    angular
        .module('fuse')
        .run(runBlock);


    function runBlock($rootScope, $timeout, $state, $cookieStore)
    {   

        $rootScope.$on('$translateChangeSuccess', function () {

          // catch translateChangeSuccess event
          // redo the previous api request

        });

     }

})();

// my change language function 

      /**
       * Change Language
       */
      function changeLanguage(lang)
      {
          angular.forEach(vm.languages, function(value, key) {

              if (lang.code == key)
                  $translate.use(lang.code); // launch translateChangeSuccess event
          });
      }

 // my api service

 function apiService($http, $resource, $translate, CONFIG_API)
    {
        // change header with good language 
        $http.defaults.headers.common["Accept-Language"] = $translate.proposedLanguage();

        var api = {};

        // Base Url
        api.baseUrl = CONFIG_API.base_url;

        // request to reload when user changes language
        api.Documents = $resource(api.baseUrl + 'documents/:id', 
            {id: '@id'},
            {update: {method: 'PUT'}}
        );
        ...
    }

Answer 1

Ok, so I found how to do that. I just ask data to the api again through a service (apiResolver)

test.module.js :

(function ()
{
    'use strict';

    angular
        .module('app.test_module', [])
        .config(config);

    /** @ngInject */
    function config($stateProvider, msApiProvider)
    {
        // State
        $stateProvider.state('app.test_module', {
            url      : '/myurl',
            views    : {
                'content@app': {
                    templateUrl: 'mytemplate.html',
                    controller : 'MyController as vm'
                }
            },
            resolve  : {
                test : function (apiResolver) 
                {
                    return apiResolver.resolve('myquery@query');
                }
            }
        });

    }

})();

and test.controller.js :

(function ()
{
    'use strict';

    angular
        .module('app.test_module')
        .controller('testController', testController);

    /** @ngInject */
    function testController($rootScope, apiResolver, dataToDisplay)
    {
        var vm = this;

        // Data
        vm.dataToDisplay = dataToDisplay;

        $rootScope.$on('$translateChangeSuccess', function () {
           // reload my content
            apiResolver.resolve('myquery@query')
            .then(function(result) {
                vm.dataToDisplay = result;
            });
        });
      }

      // more code here but not usefull in this example
 })();

There is maybe a better way but it works, my data are translated when the user changes language :)