Change content of html page based on language selected using json

Question

In my application, the user is prompted to select a language based on which all content in the application will be changed to this specific language. I use json array to get user information, so I saved it as

  {"uniqueId":1238902,
         {
    "english":{
        "username":"Sherif",
        "phone" :[phone]
    },
    "arabic":{
        "name":"شريف",
         "phone": [phone]}}

But Im only able to display one language in my html,

{{"User Name" |translate}}:
    <input type="text" ng-model="editingInfo[0].arabic.name">
    <br>
    {{"Phone"translate}}:
    <input type="number" ng-model="editingInfo[0].arabic.phone">
    <br>
    <button ng-click="save()">

controller:

//selecting specific user to edit
$scope.editing=function(key){
$scope.editingInfo=[];
for (var i=0; i<$scope.userInfo.length;i++)
{
if($scope.userInfo[i].uniqueId == key.uniqueId){
$scope.editingInfo.push($scope.userInfo[i]);
};
};

So, how will I use both languages ​​on the same html page. What error do I make when calling data in html.

Answer 1

Solution concept

, . , , .

getter :

this.getText = function(textSymbol){
 return langTexts[currentChosenLanguageSymbol][textSymbol];
}

:

someLangService.getText("name");

, , , .

---

:

var app = angular.module("app",[]);

app.service("lang", function(){

  //possible to choose langs
  var langs=[
    {label:"English", symbol:"english", id:1},
    {label:"Arabic", symbol:"arabic", id:2}
  ];
  
  
  //object contains lang texts used in app
  var texts={
    "english":{
        "name":"Sherif",
        "phone" :"[phone]"
    },
    "arabic":{
        "name":"شريف",
        "phone": "[phone]"
    }
    };
  
  
  this.getLangueges = function(){
    return langs;    
  };
  
  this.setLanguage = function(lang){
    this.language=lang;
  };
  
  this.getLanguage = function(){
    return this.language;  
  };
  
  this.getText = function(symbol){
    return texts[this.language.symbol][symbol];
  };
  
  //set default as english
  this.setLanguage(langs[0]);
  
});

app.controller('controller', function(lang, $scope){
  
  //set service into view
  $scope.lang = lang;
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">

  <select ng-options="lang as lang.label for lang in lang.getLangueges() track by lang.id" ng-model="lang.language" ></select>
  
  <h3>{{lang.getText("name")}}</h3>
</div>

Hide result

. , , .

, , , . , .

, .