Insert html into div with angular keeping ui-router ui-sref property working

Question

Here is my case:

I have a div which needs to get some html injected from a function:

<div ng-bind-html="myCtrl.getMyLink()"></div>

in my controller I have:

this.getMyLink = function () {
    return '<a ui-sref="app.go.to.state1">my link</a>';
}

It works but not at all. All I have at the end in my html is only

<a>my link</a>

It's a link but the ui-sref redirection is not working. There is surely something I'm missing.

How can I fix that?

Answer 1

The content inside ng-bind-html doesn't get compiled by angular, it is intended for static html.

You would need to use your own directive instead and either set a template or do your own compiling with $compile.

Alternatively you might be able to use ng-include. There aren't enough details given for your use case to help much more