Custom components not working

[ShakedGold]

I tried using the external file with templateUrl and for some reason didn't see anything, so I tried to create a component like so:

angular.module(NAME).component('test', {
            template: `
                <div>
  <button ng-click="$ctrl.updateCounter()">Add Item</button>
  <button ng-click="$ctrl.resetCounter()">Reset Items</button>
  <pre>{{ $ctrl.items }}</pre>
</div>
                `,
            controller: function() {
                this.items = [];
                this.updateCounter = function() {
                    this.items.push(this.items.length);
                };
                this.resetCounter = function() {
                    this.items = [];
                };
            },
        });

and used it like this:

component() {
            return {
                template: `
                    <div>
                        <test></test>
                    </div>
                `,
                $ctrl: { },
    };
},

but nothing is showing up, in the html of the app it just inserts: and not the normal HTML.
when I put the component in the string instead on creating the component everything works fine.

I don't really know angular so I might have missed something but I checked didn't find anything