What is happening with the `<todos-list>` part of the tutorial?

#1

I’m running through the tutorial for meteor+angular, and I’m trying to change stuff along the way to better understand what is happening and where I can extend/change things for my own purposes, and I keep tripping on this one part.

I can’t find anywhere in the tutorial, or that matter other documentation, which explains why I can’t rename this or why it’s named in this particular way. Searching project wide, as well as on the first few pages of the tutorial, I can find no other instances of this particular string.

Here’s what I’m talking about:

On page 2 of the “Todo App with Angular”, Templates, there’s section 2.6, Add todosList component to app template, which instructs me to add a line to the client/main.html file, with a code box which looks like the following:

<body>
  <div class="container" ng-app="simple-todos">
    <todos-list></todos-list>
  </div>
</body>

My ignorance is in the specifics of the tag name “todos-list”. Where does it come from? Why, when I change the name to anything else, does the list not appear in the web browser? What keywords can I use to search for an explanation of this behavior?

The main reason for my confusion is that I don’t know what “todos-list” is supposed to connect to, since there’s no other string named this way anywhere else in the project.

Thanks if anyone has a few minutes to help me understand this.