How to dynamically change page content?

Question

JavaScript

You need to dynamically change the language on one page, the rest will be pulled up through localstorage. I looked at examples that are more correct, but in this case you need to do just that.
Sample

<div id="canvas" class="canvas">
  <div id="content" class="content">

    <img class="logo" src="images/logo.svg" alt="">
    <p class="header">{{ 'header' | translate }}</p>

    <div class="container460">
      <p class="subHeader">{{ 'description' | translate }}</p>
      <p class="link" ng-click='about()'>{{ 'link' | translate }}</p>
    </div>

    <div class="buttonsPanelColumn">
      <p class="signInButton" ng-click='login()'>{{ 'enterButton' | translate }}</p>
    </div>

    <div class="buttonsPanelRow">
      <p id="ru" class="setLanguageButton" ng-click='switchLanguage("ru")'>Русский</p>
      <p id="en" class="setLanguageButton" ng-click='switchLanguage("en")'>English</p>
      <p id="de" class="setLanguageButton" ng-click='switchLanguage("de")'>Deutsch</p>
      <p id="fi" class="setLanguageButton" ng-click='switchLanguage("fi")'>Suomi</p>
      <p id="ar" class="setLanguageButton" ng-click='switchLanguage("ar")'>العربية</p>
      <p id="tr" class="setLanguageButton" ng-click='switchLanguage("tr")'>Türkçe</p>
      <p id="fr" class="setLanguageButton" ng-click='switchLanguage("fr")'>Français</p>
      <p id="cn" class="setLanguageButton" ng-click='switchLanguage("cn")'>中文</p>
    </div>

  </div>
</div>

Controller

// Switch language
    var currentLanguage = localStorage.getItem('NG_TRANSLATE_LANG_KEY');
    var currentLanguageID = document.getElementById(currentLanguage);

    var langButton = angular.element(document.querySelector("#" + currentLanguage));
    langButton.addClass("setLanguageButtonActive")

    $scope.switchLanguage = function(data){
      var selectedLanguage = data;
      var selectedLanguageID = document.getElementById(selectedLanguage);
      if (currentLanguage != data) {
        localStorage.setItem('NG_TRANSLATE_LANG_KEY', data);
        location.reload();
      }
    };

How can this be implemented?

Answer 1

Judging by the template, this is the first Angular, there is a standard solution
https://angular-translate.github.io/
And what you called the controller is some kind of hat, to be very polite.

var currentLanguageID = document.getElementById(currentLanguage);

    var langButton = angular.element(document.querySelector("#" + currentLanguage));
    langButton.addClass("setLanguageButtonActive")

What is this shit?
To set active class use https://code.angularjs.org/1.7.0/docs/api/ng/direc...
For list of languages ​​use https://code.angularjs.org/1.7.0/docs/api /ng/direc...
Forget document.querySelector and document.getElementById like a bad dream.