Georgi Antonov Georgi Antonov - 1 year ago 59
AngularJS Question

Dynamically change custom directive attribute value which should change directive content

Basically I have made custom directive to which i pass Url as string then inside the directive controller i'm calling

method which creates the content inside this directive. What i want is to be able to change the value of
attribute which in return will change the content inside the directive because the new Url will return different
object. But it seems the directive is not getting refreshed when i change the
from the controller.


<span ng-click="annotatonData = 'data/annotations1.json'">John</span>

<span ng-click="annotatonData = 'data/annotations2.json'">Marry</span>

<ng-annotate user-options="user" annotation-url="{{annotatonData}}"></ng-annotate>


app.controller('ngAnnotationsController', ['$scope', '$http', function ($scope, $http) {

//InIt default http get

$scope.annotatonData = 'data/annotations1.json';



app.directive('ngAnnotate', function () {
return {
templateUrl: 'templates/...',
restrict: 'E',
scope: {
annotationUrl: "@"

controller: ['$scope', '$http', function ($scope, $http) {

$http.get($scope.annotationUrl).then(function (response) {
$ =;

Answer Source

First, I suggest you change to

scope: {
    annotationUrl: "="

the you can add a watcher to invoke $http whenever value is changed

$scope.$watch('annotationUrl', function(newVal, oldVal) {
    if (newVal != oldVal) {
       $http.get(newVal).then(function (response) {
            $ =;

However, if you want to keep annotationUrl as it is, you need to use $attr.$observe('annotationUrl', fn) to catch value changes.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download