Javascript AngularJS-呈现嵌套范围变量

鉴于以下问题的简化代码：

var app = angular.module("app", []).controller("MainCtrl", function ($scope) {
$scope.data = {
    query: "",
    rnd: Math.random(),
    en: "this is your query: {{data.query}} and ({{rnd}}) is the random number",
    es: "esta es tu consulta: {{data.query}} Y ({{rnd}}) es el número aleatorio"
}
});

以及以下观点：

<div ng-app="app">
<div ng-controller="MainCtrl">
    <input ng-model="data.query">
    <div>Desired results EN : this is your query: {{data.query}} and ({{data.rnd}}) is the random number</div>
    <div>Desired results ES : esta es tu consulta: {{data.query}} Y ({{data.rnd}}) es el número aleatorio</div>
    <hr>
    <div>{{data.en}}</div>
    <div>{{data.es}}</div>
</div>

问：渲染嵌套值的正确方法是什么

更新：为了澄清，我正在尝试为我的应用程序创建一个语言词典，其中一些标题包含范围变量，我希望保持词典结构如下：

{key:sentenceWithVars}

---

只需创建两个不同的绑定：

JS

HTML

HTML

---

谢谢你的回复。这个例子只是简化了，想想一个包含许多模板的语言包，比如许多语言中的一些文本{{val1}}和{{val2}}。翻译时，您希望将词典作为关键字：句子，其中句子可以包含许多范围值。在这种情况下，请查看此问题的答案：也许这对您有帮助。谢谢！我刚刚找到了同样的解决方案：感谢@basilikum:

var app = angular.module("app", []).controller("MainCtrl", function ($scope) {
    $scope.data = {
        query: "",
        en: "this is your query: ",
        es: "esta es tu consulta: "
    }
});

<div ng-app="app">
<div ng-controller="MainCtrl">
    <input ng-model="data.query">
    <div>Current Query:{{data.query}}</div>
    <div>{{data.en}}{{data.query}}</div>
    <div>{{data.es}}{{data.query}}</div>
</div>

var app = angular.module("app", []).controller("MainCtrl", function ($scope) {
    $scope.data = {
        query: "",
        en: "this is your query: ",
        es: "esta es tu consulta: "
    }
    $scope.$watch("data.query", function (value) {
        $scope.data.en = "this is your query: " + value;
        $scope.data.es = "esta es tu consulta: " + value;
    });
});

<div ng-app="app">
<div ng-controller="MainCtrl">
    <input ng-model="data.query">
    <div>Current Query:{{data.query}}</div>
    <div>{{data.en}}</div>
    <div>{{data.es}}</div>
</div>