Can I not use $ctrl. in angular component template : <p>I am using angular 1.5 and I wanted to extract part of my DOM into a <a href="https://docs.angularjs.org/guide/component" rel="noreferrer">component</a>.<br>
Here is what I have done so far:</p>

<pre><code>angular.module('my-app').component("menuItem",{
    templateUrl : "lib/menu-item.tmpl.html",
    bindings : {
        index : "&lt;",
        first : "&lt;",
        last : "&lt;",
        item : "=",
        onDelete : "&amp;",
        onMoveUp : "&amp;",
        onMoveDown : "&amp;"
    },
    controller : function($scope) {
    }
});
</code></pre>

<p>And the template looks like so:</p>

<pre><code>&lt;div&gt;
    &lt;aside class="sort-buttons"&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;button ng-click="$ctrl.onMoveUp({index : $ctrl.index})"
                        ng-disabled="$ctrl.first"&gt;
                    &lt;i class="icon icon-up"&gt;&lt;/i&gt;
                &lt;/button&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;button ng-click="$ctrl.onMoveDown({index : $ctrl.index})"
                        ng-disabled="$ctrl.last"&gt;
                    &lt;i class="icon icon-down"&gt;&lt;/i&gt;
                &lt;/button&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/aside&gt;

    &lt;div class="row"&gt;
        &lt;button class="btn btn-danger btn-icon btn-remove"
                ng-click="$ctrl.onDelete({index : $ctrl.index})"&gt;
            &lt;i class="icon icon-remove"&gt;&lt;/i&gt;
        &lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I use this component (far from finished!) like so:</p>

<pre><code>&lt;section class="container menu"&gt;
    &lt;menu-item index="$index" first="$first" last="$last" item="item"
            on-delete="removeItem(index)"
            on-move-up="moveItemUp(index)"
            on-move-down="moveItemDown(index)"
            ng-repeat="item in menu"&gt;
    &lt;/menu-item&gt;
    &lt;!-- some other display details of `$ctrl.item` --&gt;
&lt;/section&gt;
</code></pre>

<p>I have three main questions I guess:</p>

<ol>
<li>Why do I have to use <code>$ctrl</code> everywhere in my template? There is <code>$scope</code> so why all the bindings go to <code>$ctrl</code> rather than <code>$scope</code>? And is there a  way to change this?</li>
<li>Can I somehow have values like <code>$index</code>, <code>$first</code> and <code>$last</code> passed in? It seems to me like it is a "buttery butter" to pass them in...</li>
<li>Is this even the right approach? Or should I use directive? I know components have isolated scope, and directives can have not-isolated scope. but could I mix/match in a directive (share the scope with controller, but also add my own functions to be used within directive/template only?)</li>
</ol>

<p>Thanks for your help.</p>
