title: Add/Remove class bahaving odd AngularJS directive
body: <p>I have a custom AngularJs directive for social media buttons:</p>
  
  <pre><code>app.directive('socialButton', function () {
    return {
      require: 'ngModel',
      replace: false,
      restrict: 'E',
      scope: true,
      transclude: true,
      template: '&lt;a href="" class="btn btn-sm btn-fade btn-{{provider}}" &gt;&lt;i class="icon-{{provider}}" &gt;&lt;/i&gt;&lt;span ng-transclude&gt;&lt;/span&gt;&lt;/a&gt;',
      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);
      },        
    };
  });
  </code></pre>
  
  <p>This works fine in its current form.
  However.</p>
  
  <p>If I change it to "replace: true" and "var btn = element;" so that the A element becomes the root, it does no longer apply the active class to the link.
  It seems like addClass and removeClass doesn't work for the root element.
  setting root element text etc works fine, but adding/removing class does not.
  Why is that?</p>