angularjs - HTML added in link function won't bind to scope -

i need template changes depending on object on scope. because it's object , not string, can't use template function, i'm using link function add html element. of course html needs explicitly $interpolated now, here's end with:

scope: {     obj: "=ngmodel",     type: "<" }, controlleras: "display", controller: function() {     let display = this;     // sets bunch of other functions, including booleanlabel , displaydata }, link: function(scope, element, attrs) {     let display = scope;      function template(type) {         switch (type) {             case objtypes.x:                 return `<button ng-click="display.toggleboolean(display.obj)">                           {{display.booleanlabel(display.obj.data)}}                         </button>`;             case objtypes.y:                 return `<button>                           {{display.displaydata(display.obj.data)}}                         </button>`;             }         }          element.html($interpolate(template(display.type))(display));     } 

this doesn't work. here's weird thing: when replace display.obj obj, value gets through. functions need called display.function().

i suspect has fact obj put on scope outside, while functions put on scope controller, it's incredibly weird , confusing. , what's worse, ng-click doesn't trigger. whether use display.toggle() or toggle() doesn't matter. display.booleanlabel() , display.displaydata() work fine, long pass obj, rather display.obj.

what's going on here? , how make easier understand , maintain?

i'm using angular 1.5, , use controlleras: 'display' , let display = scope make sure scope uses same name everywhere. point keep easier understand, that's not working here.

first, can use ng-if in template.

second, template can function.

third, if add new html elements - need $compile it. not sure tying interpolate...