Два экземпляра одной и той же директивы перезаписывают друг друга

Question

Я использую одну и ту же директиву для нескольких экземпляров панели инструментов. На панели инструментов есть кнопка с функцией переключения. Таким образом, если первый клик делает «добавить», то другой клик делает «удалить». Вот упрощенная директива, которую я использую:

a.directive("trendChartToolbar", function ($templateRequest, $compile) {
return {
    scope: {            
    },
    link: function (scope, elem, attrs) {
        templateSRC = 'templateSRC.html';
        $templateRequest(templateSRC).then(function (html) {                
            var template = angular.element(html);
            $(elem).append(template);
            template = $compile(template)(scope);
            angular.element(elem).on('click', function (event) {
                if (scope.state === undefined)
                    scope.state = true;
                else
                    scope.state = !scope.state;
                service.someMethod(event.target.name, scope);
            });
        });                   
    }
  };
});

Вот шаблон:

<div>
    <img style="cursor:pointer;margin-right:10px" name="deviation"
         src="image.svg" />
</div>

Пока существует только один экземпляр директивы, все работает нормально. scope.state изменяется с true на false и обратно. Но если существует другой экземпляр, тогда, когда я нажимаю на первый экземпляр во второй раз, область действия имеет свойство состояния undefined. Я ожидал, что пока я использую изолированную область, это будет работать. Есть идеи?

Спасибо