Pass bindings to TemplateUrl in Angular's component

Question

My component object looks like this:

var options = {
    bindings: {
        title: '<',
        rows: '<'
    },
    controller: registers,
    templateUrl: function ($element, $attrs) {
        return '/app/dashboard/registers/register.html';
    }
};

I need access to the bindings title and rows in my register.html markup. I understand $element and $attrs but I'm not quite sure how to inject that into a templateUrl which is a string reference to an HTML file.

I would like to be able to use those values in the template as such:

<p>Title: {{vm.title}}</p>
<p>Rows: {{vm.rows}}</p>

Can someone point me in a direction where the templateUrl can use the curly braces to embed the values of the bindings into the markup?

Answer 1

It isn't related to templateUrl function, no extra actions should be performed there.

If no controllerAs option is specified, controller identifier defaults to $ctrl, not vm. Scope properties should be available in template as

<p>Title: {{$ctrl.title}}</p>
<p>Rows: {{$ctrl.rows}}</p>

Here is a demo that shows this (thanks to @AWolf).