Javascript angularjs使用单控制器和两个视图

所以我有两种观点。一个视图从用户获取多个输入，第二个视图显示执行某些计算后的输入结果。由于这两个视图属于不同的div，我必须分别为它们定义相同的ng控制器

现在的问题是，输入视图中的更改没有反映在输出视图中

var-app=angular.module（“app”，[]）；
应用程序控制器（'controller'，函数（$scope）{
$scope.val1=10；
$scope.val2=0；
$scope.val3=0；
$scope.val4=0；
$scope.cal=函数（）{
返回parseInt（$scope.val1）+parseInt（$scope.val2）+parseInt（$scope.val3）+parseInt（$scope.val4）；
}
});









Self:{{cal（）}}
其他：{{cal（）}}
您有2个控制器部分的特殊原因吗？您应该使用同一控制器管理两个div

如果您希望维护2个控制器，那么您将需要在它们之间进行通信-这可以通过一个简单的服务来完成，该服务将存储您的数据。或者，尽管这种做法有时会遭到反对，但您可以使用$rootScope。不过，这个概念仍然是一样的


var-app=angular.module（“app”，[]）；
应用程序控制器（'controller'，函数（$scope）{
$scope.val1=10；
$scope.val2=0；
$scope.val3=0；
$scope.val4=0；
$scope.cal=函数（）{
返回parseInt（$scope.val1）+parseInt（$scope.val2）+parseInt（$scope.val3）+parseInt（$scope.val4）；
}
});









Self:{{cal（）}}
其他：{{cal（）}}
对此进行快速搜索，发现了另一个SO问题，并给出了解释和答案

每次Angular编译器在HTML中找到ng控制器时，一个新的
范围被创建。（如果使用ng view，则每次转到不同的
路由时，也会创建一个新范围。）

如果需要在控制器之间共享数据，通常需要一个服务
你最好的选择。将共享数据放入服务中，并注入
进入控制室的服务


（不是我的回答-如果答案对您有帮助，请向上投票）
我的意思是，这两种观点相距甚远，而且它们之间存在大量代码。我不想找到一个共同的祖先div并将其分配给控制器，因为这将嵌套与它们之间的视图相关联的其他控制器。这会使我的情况复杂化。谢谢。很抱歉，我本来可以自己搜索的，这个问题正是我要问的。