Directive cannot bound for component?
<p><strong>Update:</strong>
<a href="https://plnkr.co/edit/kbz5uimNZ6vKTiT9QB6a?p=preview" rel="nofollow">https://plnkr.co/edit/kbz5uimNZ6vKTiT9QB6a?p=preview</a> is created for testing.</p>

<p>I have the following directive <code>egFiles</code> to handle the status of <code>&lt;input type="file" id="newFile" eg-files="model.files" has-file="model.hasFile" /&gt;</code> for file uploading.</p>

<pre><code>(function () {
    'use strict';
    angular.module('myApp').directive('egFiles', egFiles);

    function egFiles() {
        var directive = {
            link: link,
            restrict: 'A',
            scope: {
                files: '=egFiles',
                hasFiles: '='
            }
        };
        return directive;

        function link(scope, element, attrs) {
            element.bind('change', function () {
                scope.$apply(function () {
                    if (element[0].files) {
                        scope.files.length = 0; // Breakpoint not hit here
                        angular.forEach(element[0].files, function (f) {
                            scope.files.push(f);
                        });
                        scope.hasFiles = true;
                    }
                });
            });

            if (element[0].form) {
                angular.element(element[0].form)
                        .bind('reset', function () {
                            scope.$apply(function () {
                                scope.files.length = 0;
                                scope.hasFiles = false;
                            });
                        });
            }
        }
    }
})();
</code></pre>

<p>The following the Anguar 1.5 component to consume the directive.</p>

<pre><code>(function (undefined) {
    'use strict';

    angular.module('myApp')
    .component('doc', {
        template: '...
&lt;input type="file" id="newFile" eg-files="model.files" has-file="model.hasFile" /&gt;
     ....',
        bindings: {
            id: '&lt;',
            "$router": '&lt;'
        },
        controllerAs: 'model',
        controller: [controller]
    });

    function controller() {
        var model = this;

        model.$routerOnActivate = function (next, previous) {
            model.id = next.params.id;
        }

        model.hasFile = false;
        model.uploading = false;
    }
})();
</code></pre>

<p>I set the break point in the function bound to <code>change</code> in directive egFiles. However the break point is never hit when I select a file by click the button?</p>