How to feed Angular dynamic data from Ajax.jquery?

Question

JavaScript

Actually, in the process of creating localization on angular, I encountered the following problem:
During validation and user actions, the server responds via ajax

var ajaxSettings = {
                type: method,
                url: action,
                data: $form.serialize()
            };

Localization

var app = angular.module('translation', ['ngResource','ngCookies']);

app.controller('language', ['$scope', '$cookies', 'translationService',

    function ($scope, $cookies, translationService) {

        //Выполняем перевод, если произошло событие смены языка
        $scope.translate = function (langKey) {
            translationService.getTranslation($scope, langKey);
            $cookies.loc_language = langKey;
        };
        var $cur_lang = $cookies.loc_language;
        if ($cur_lang == null) {
            $scope.translate('ru');
        } else {
            $scope.translate($cur_lang);
        }
}]);

app.service('translationService', function ($resource) {

    this.getTranslation = function ($scope, language) {
        var languageFilePath = 'lang/translation_' + language + '.json';
        console.log(languageFilePath);
        $resource(languageFilePath).get(function (data) {
            $scope.translation = data;
        });
    };

});

The response from the server comes in the form {{translation.ENTER_LOGIN}} and is therefore not translated. I understand that you need to dig in the direction of databinding, read about apply, watch, compile, tried to use them in different ways, but the efforts were in vain and the fatal phrase refused to be translated. Please help!

Answer 1

This is about compiling and using templates on the fly
codepen.io/AMar4enko/pen/azvEXw
Otherwise, there are a lot of architecture questions, for example, what $scope.translate does in the controller, why the language controller is needed in general, etc.