Why isn't this directive template interpolated?

Question

What am I missing?

app.directive('summaryAddress', [function () {

    return {
        scope: {
           address: '=summary-address'
        },
        template: "<h2>Billing Address</h2>" +
            "<span>{{address.flatNumber}}</span>"
    };

}]);

The output is just...

{{address.flatNumber}}

Answer 1

Scope mapping needs to use the normalized camel case name of the attribute and not the form that it appears in the mark up.

pobo.directive('summaryAddress', [function () {

    return {
        scope: {
            address: '=summaryAddress'
        },
        template: "<h2>Billing Address</h2>" +
            "<span>{{address.flatNumber}}</span>"
    };

}]);