define a controller and use twice - angularjs

Question

I want to user a controller for two separated div and when I do that , it send $http requests twice
How can i use the scope of other controllers?
here is my code :
<div data-ng-controller="productCTRL">
<span ng-model="basket | count"></span>
....Some HTML Code......
</div>
<div data-ng-controller="AuthController">
....Some HTML Code...
</div>
<div data-ng-controller="productCTRL">
<ul ng-repeat="product in products">
<li>{{product.title}}</li>
</ul>
</div>

Answer 1

One approach...
You could use a monolithic controller:
<div data-ng-controller="mainCTRL">
<div data-ng-controller="productCTRL">
<span ng-model="basket | count"></span>
....Some HTML Code......
</div>
<div data-ng-controller="AuthController">
....Some HTML Code...
</div>
<div data-ng-controller="productCTRL">
<ul ng-repeat="product in products">
<li>{{product.title}}</li>
</ul>
</div>
</div>
Then if you make the $http call in mainCTRL instead of productCTRL, it will run just once when the view is rendered. You could then access the data held in mainCTRL from productCTRL via scope inheritance.
Another approach...
You could move the $http call to an angular service or factory. Since these are singletons, only one instance will ever exist and that means that only one $http call would be made when the app is first loaded. You would then store the returned data locally in the service and expose it publicly.
Here is a simple implementation as a factory:
app.factory("productService", function($http){
var products = [];
$http.get("api/products/get-products").then(function(response){
products = response.data;
});
return {
products: products
}
});
If you inject the factory into your productCTRL it will have direct access to the products data:
appController("productCTRL", function(productService){
$scope.products = productService.products;
});
The controller will still be instantiated twice, but it's only going to reassign the $scope.products variable. Most importantly, it no longer makes a redundant call over HTTP to your API.

Answer 2

It looks like you want to access the scope of other controllers-
Three are ways to communicate-
Parent child inherited scope - You have to create a parent controller and child controller can communicate using Parent scope. It is recommended only for tightly coupled controllers.
Event bus - Subscribe can listen on event ($on) and publisher can publish using $emit (current to parent scope can access using $on) or $brodcast (current to child scope can access using $on). Sibling controller can't share the data using this approach. To share the data between sibling controller, you can use $rootScope.broadcast and this event will be listen by all scope including sibling controllers. It is also coupled using event.
Using service - Both controller can share the data using common service because services are singleton.