Use link function in directives to append different HTML elements <p><a href="https://jsfiddle.net/o76hxj69/1/" rel="nofollow"><strong>Fiddle</strong></a></p> <p>I have two buttons. When pressed it displays a modal, with som text. But I also want to add some html dynamically depending on which button is pressed.</p> <p>I have tried both <code>$observe</code> and <code>$watch</code> methods, but I'm having problems making it work. </p> <p>here is my code.</p> <pre><code>angular.module('TM', []) .controller('protocolCtrl', function(){ this.text = 'Now looking at the protocol part'; this.modalId = 'protocolModal'; }) .controller('categoryCtrl', function(){ this.text = 'Now looking at the category part'; this.modalId = "categoryModal"; }) .directive('modalDirective', function(){ return { restrict: 'E', scope: { ctrl: '=', modalId: '@', }, template: ['&lt;div id="{{modalId}}" class="modal fade" role="dialog"&gt;', '&lt;div class="modal-dialog"&gt;', '&lt;div class="modal-content"&gt;', '&lt;div class="modal-header"&gt;', '&lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;', '&lt;/div&gt;', '&lt;div class="modal-body"&gt;', '&lt;p&gt; {{ ctrl.text }} &lt;/p&gt;', '&lt;/div&gt;', '&lt;div class="modal-footer"&gt;', '&lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;', '&lt;/div&gt;', '&lt;/div&gt;', '&lt;/div&gt;', '&lt;/div&gt;'].join(''), link: function(scope, element, attrs) { element.$observe('modalId', function(){ var modal = element.find('#{{modalId}}'); if(modal == 'protocolModal'){ element.find('#{{modalId}}').append('&lt;div&gt;this is a protocol test...&lt;/div&gt;'); } else { element.find('#{{modalId}}').append('&lt;div&gt;this is a category test...&lt;/div&gt;'); } }); } } }); </code></pre>