Controller Naming in Components

Angular 1.5 components default controllerAs values to $ctrl and directives & registered controllers both need an explicit controller name, so what are the best practices for naming Angular controllers?

$ctrl, the good and bad

There’s some benefit to the fact that Angular explicity sets a default controllerAsvalue on a component. For one, extremely simple components can be slimmed down in its definition. In addition, you don't have any runtime errors that are thrown like you would with a directive that has a controller definition, but no controllerAs value.

However, the larger a components template gets, the less readable it becomes. This is true in its template HTML, but also when it gets rendered to the DOM. Inspecting elements and seeing $ctrl nested in elements creates one massive blob where the distinct beginning and ending of a component is more difficult to identify.

In my development experience, I only use $ctrl when the component is PURELY presentational (a.k.a. the only thing I use the $ctrl for in the template is to access the bindings) and when the template is short enough to be defined inline with the component definition (see examples below).

My preferences on naming

Capitalization — Controller names should be PascalCase. The capitalization of the first character separates it from a potential property on the $rootScope (which is bad practice anyway!). Most JS developers wouldn't name properties using PascalCase, so conforming to PascalCase for controllers can create that separation.
The use of "ctrl" or "controller" in the controller name - In my opinion, adding either of these to the name is unnecessary. If the above practice is used for casing your controller properly, it should be easily identified as a controller anyhow. Now you're just making me type more!
Naming - Lastly, and this should be relatively obvious, the name should reflect the component's name. Doing so adds context to the bindings used throughout the DOM and makes reading a DOM structure much easier.

Front End Developer