javascript - 奇妙な AngularJS ディレクティブを持つクラスの追加/削除

Question

ソーシャル メディア ボタン用のカスタム AngularJs ディレクティブがあります。

app.directive('socialButton', function () {
  return {
    require: 'ngModel',
    replace: false,
    restrict: 'E',
    scope: true,
    transclude: true,
    template: '<a href="" class="btn btn-sm btn-fade btn-{{provider}}" ><i class="icon-{{provider}}" ></i><span ng-transclude></span></a>',
    link: function (scope, element, attrs) {

        scope.provider = attrs.provider;
        var btn = element.children("a");

        var eval = function () {
            return scope.$eval(attrs.ngModel);
        };

        var activate = function (value) {
            if (value == true) {
                btn.addClass("active");
            }
            if (value == false) {
                btn.removeClass("active");
            }
        };

        var active = eval();
        scope.$watch(eval, activate);
        activate(active);
    },        
  };
});

これは、現在の形式で問題なく動作します。でも。

「replace: true」と「var btn = element;」に変更すると、A 要素がルートになるように、アクティブなクラスをリンクに適用しなくなります。ルート要素に対して addClass と removeClass が機能しないようです。ルート要素のテキストなどの設定は正常に機能しますが、クラスの追加/削除は機能しません。何故ですか？