javascript - Dynamically changing Angular directive based on attribute -

i want change template/templateurl whenever specific attribute changes. have following, load initial image correctly, doesn't change on update.

.directive('parkingimage', ['$compile', function($compile) {     return {         restrict: 'e',         scope: {             image: '='         },         link: function(scope,element,attrs) {             scope.contenturl = 'img/parking/'+attrs.templateurl+'.svg';             attrs.$observe("template-url", function(v){                 scope.contenturl = 'img/parking/'+v+'.svg';             });         },         template: '<div ng-include="contenturl"></div>'     } }]); 

and in html <parking-image id="parking-image" template-url="area_2"></parking-image>

i took @ angular.js directive dynamic templateurl , doesn't seem work properly.

the correct approach observe on templateurl rather template-url:

attrs.$observe("templateurl", function(v){     scope.contenturl = 'img/parking/'+v+'.svg'; });