How to properly use the same AngularJS 1.5 component multiple times in a view?
<p>I'm creating a set of widgets with AngularJS 1.5's new components. The problem is, when using the same widget multiple times, they somehow share their controller or scope. I thought one of the things about components was that their scope is completely isolated?</p>

<hr>

<p>My main html template which hold the widgets:</p>

<pre><code>&lt;widget-list
    title="Books"
    class="col-xs-12 col-md-4"&gt;
&lt;/widget-list&gt;

&lt;widget-list
    title="Movies"
    class="col-xs-12 col-md-4"&gt;
&lt;/widget-list&gt;

&lt;widget-list
    title="Albums"
    class="col-xs-12 col-md-4"&gt;
&lt;/widget-list&gt;
</code></pre>

<p>My widget template:</p>

<pre><code>&lt;div class="widget widget-list"&gt;
    &lt;div class="panel b-a"&gt;

        &lt;div class="panel-heading b-b b-light"&gt;
            &lt;h5&gt;{{$widget.title}}&lt;/h5&gt;
            &lt;div class="pull-right"&gt;
                &lt;button type="button" class="btn btn-default btn-sm" ng-click="$widget.doSomething()"&gt;
                    Do something
                &lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div class="panel-content"&gt;
            {{$widget.content || 'No content'}}
        &lt;/div&gt;

    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My widget component:</p>

<pre><code>app.component('widgetList', {
    templateUrl: 'template/widget/widget-list.html',
    bindings: {
        title   : '@',
    },
    controllerAs: '$widget',
    controller: function($timeout) {

        $widget = this;

        console.log('Title on init: ', $widget.title)

        $timeout(function() {
            console.log('Title after 3 seconds: ', $widget.title)
        }, 3000)

        $widget.doSomething = function() {
            $widget.content = "Something";
        }
    }
});
</code></pre>

<hr>

<p>When running my code, this is what my console looks like:</p>

<pre><code>Title on init: Books
Title on init: Movies
Title on init: Albums
(3) Title after 3 seconds: Albums
</code></pre>

<hr>

<p>Also after rendering, all three widgets display <code>No content</code> in their template. But, when clicking the <code>doSomething()</code> button in either one of the three widgets, only the content of the last widget updates to <code>Something</code>.</p>

<p>What is happening here? Why are my components not 'isolated'?</p>