How can I use the same controller in multiple places without creating new instances of it? AngularJS

I am essentially trying to create html component blocks that can be used in a WordPress page editor. The issue that I am running into is each block is using the ng-controller directive to get access to the scope of said controller. This is resulting in new instances of the same controller being created which is causing a delay in the blocks showing up (it’s also not a practical way of doing this).

The way that I have the app currently setup is to use a short-code linked to one large page of html, which is not easily manageable as an end user and moves away from the component based structure i’d like to implement. I’ve tried using the angularjs .component() directive but I am running into the same issue of having new controller instances.

<div ng-controller="someCtrl"> 
--- first html block that loads first ---
</div>

<div ng-controller="someCtrl"> 
--- second html block that is delayed until after the first is loaded ---
</div>

Essentially, what I would like to know is whether or not there is a way to access the same controller (excluding a wrapper) without creating new instances of said controller?

Source: AngularJS