javascript - Use link function in directives to append different HTML elements -

fiddle

i have 2 buttons. when pressed displays modal, som text. want add html dynamically depending on button pressed.

i have tried both $observe , $watch methods, i'm having problems making work.

here code.

angular.module('tm', [])  .controller('protocolctrl', function(){     this.text = 'now looking @ protocol part';     this.modalid = 'protocolmodal'; })  .controller('categoryctrl', function(){     this.text = 'now looking @ category part';     this.modalid = "categorymodal"; })  .directive('modaldirective', function(){     return {         restrict: 'e',         scope: {             ctrl: '=',             modalid: '@',         },         template:  ['<div id="{{modalid}}" class="modal fade" role="dialog">',                        '<div class="modal-dialog">',                         '<div class="modal-content">',                         '<div class="modal-header">',                         '<h4 class="modal-title">modal header</h4>',                         '</div>',                         '<div class="modal-body">',                         '<p> {{ ctrl.text }} </p>',                         '</div>',                         '<div class="modal-footer">',                         '<button type="button" class="btn btn-default" data-dismiss="modal">close</button>',                         '</div>',                         '</div>',                          '</div>',                         '</div>'].join(''),         link: function(scope, element, attrs) {             element.$observe('modalid', function(){                 var modal = element.find('#{{modalid}}');                 if(modal == 'protocolmodal'){                     element.find('#{{modalid}}').append('<div>this protocol test...</div>');                 } else {                     element.find('#{{modalid}}').append('<div>this category test...</div>');                 }             });         }     } }); 

i don't think there element.$observe - there attrs.$observe , scope.$watch. have modelid on scope, let's use that.

also, instead of wonky .find id, inject element placeholder template , replacewith accordingly:

template: '<div id="{{modalid}}">\              ...\              <div class="modal-body">\                <template-placeholder></template-placeholder>\              </div>\            </div>", link: function(scope, element){   // ...    var unwatch = scope.$watch("modalid", function(val){     var placeholder = element.find('template-placeholder');     if(val == 'protocolmodal'){        placeholder.replacewith('<div>this protocol test...</div>');     } else {       placeholder.replacewith('<div>this category test...</div>');     }      unwatch(); // seems don't need set again   } }