Вместо этого было бы лучше внести это изменение в директиву. Если по какой-либо причине это невозможно, то есть несколько вариантов.

Вне приложения получите ссылку на любой элемент DOM в приложении. Используя эту ссылку, вы можете затем получить ссылку на ее область. Вы можете использовать свой элемент с идентификатором d1. Например:

var domElement = document.getElementById('d1');
var scope = angular.element(domElement).scope();

Вот несколько вариантов:

Опция 1

Измените модель вместо прямого изменения вида. В функции ссылки сохраните начальное значение атрибута в переменной области видимости, например:

scope.myvalue = attrs.attr1;

Затем вы можете изменить значение вне приложения (используя приведенную выше ссылку на область действия), например:

scope.$apply(function(){
    scope.myvalue = 1000;
    console.log('attribute changed');
});

Вот скрипка

Вариант 2

Если представление управляется непосредственно с помощью jQuery, я не знаю ни одного случая использования $observe, $watch или изолирующей области привязки к атрибуту, который будет работать, потому что все они привязываются к самому выражению атрибута только один раз, когда ссылка функция запускается впервые. Изменение значения приведет к сбою этих привязок. Таким образом, вам придется $watch атрибут самого элемента DOM (а не через attrs):

scope.$watch(function(){         
    return $(el).attr('attr1');    // Set a watch on the actual DOM value
}, function(newVal){
    scope.message = newVal;
});

Затем вы можете изменить значение вне приложения (используя приведенную выше ссылку на область действия), например:

scope.$apply(function(){
    $("#d1").attr("attr1",1000);
});

Вот скрипка

Используйте библиотеку веб-компонентов, например x-tags от Mozilla или Polymer от Google. Эта опция работает без ручного вызова $scope.$apply при каждом изменении атрибута.

Я использую x-теги из-за их более широкой поддержки браузерами. При определении нового пользовательского тега (директивы) вы можете установить для параметра lifecycle.attributeChanged функцию обратного вызова, которая будет срабатывать каждый раз при изменении аргумента.

Официальная документация не очень полезна. Но методом проб и ошибок и погружением в код мне удалось выяснить, как это работает.

Контекст функции обратного вызова (объект this) — это сам элемент. Тот, чей атрибут изменился. Обратный вызов может принимать три аргумента:

• name — имя атрибута,
• oldValue и
• newValue – говорят сами за себя.

Итак, теперь к делу:

Код

Это будет следить за изменениями атрибута:

xtag.register('dir1', {
    lifecycle: {
        attributeChanged: function (attribute, changedFrom, changedTo) {
            // Find the element's scope
            var scope = angular.element(this).scope();

            // Update the scope if our attribute has changed
            scope.$apply(function () {
                if (attribute == 'attr1') scope.style = changedTo;
            });
        }
    }
});

Обратный вызов attributeChanged срабатывает только тогда, когда значения аргументов фактически изменяются. Чтобы получить их начальные значения, вам нужно просканировать лот вручную. Самый простой способ - определить директиву:

myApp.directive('dir1', function () {
    return {
        ... ,
        link: function (scope, element, attributes) {
            scope.attr1 = element[0].getAttribute('attr1');
        }
    };
});