Javascript 仅调用控制器功能一次，两个div使用同一控制器

我正在做

angularjs

。我有两个分区共享同一控制器。我的控制器代码是

var app=angular.module('categoryPageApp', []);
app.controller('NgProducts', function($scope,UpdateService) {

   $scope.orderby=5;
   $scope.pageNumber=1;
   $scope.loadProducts=function($scope){
             //here goes ajax call
     };

 });

我的两个控制器相同的div是

<div ng-app="categoryPageApp">
<div id="cat-products" ng-controller="NgProducts">
</div>
<div id="brand-filter" ng-controller="NgProducts">
</div>
</div>

正如我们所看到的，现在所有变量都将被声明两次，并且还将调用updatefunction。 我不希望这种情况发生，因为一次

http

调用就可以完成这项工作。有什么解决办法吗

我还想使用angular js为我的产品构建寻呼机。任何帮助都将不胜感激。

请执行以下操作：

<div ng-app="categoryPageApp" ng-controller="NgProducts">
    <div id="cat-products"></div>
    <div id="brand-filter"></div>
</div>

---

加载产品后，您可以尝试存储一些标志，如下所示：

app.controller('NgProducts', function($scope,UpdateService) {
   if (!$scope.productsAreLoaded)
     $scope.orderby=5;
     $scope.pageNumber=1;
     $scope.loadProducts=function($scope){
        //here goes ajax call
        $scope.productsAreLoaded = true;
     };

});

---

您是否尝试过将对象包装在一个div中，并且只使用了一次

ng controller=“NgProducts”

？实际上，两个div是局部视图，不能包装在一起，这就是为什么我必须分别分配控制器的原因。