title: Accessing attributes from an AngularJS directive
body: <p>My AngularJS template contains some custom HTML syntax like:</p>
  
  <pre><code>&lt;su-label tooltip="{{field.su_documentation}}"&gt;{{field.su_name}}&lt;/su-label&gt;
  </code></pre>
  
  <p>I created a directive to process it:</p>
  
  <pre><code>.directive('suLabel', function() {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      scope: {
        title: '@tooltip'
      },
      template: '&lt;label&gt;&lt;a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude&gt;&lt;/a&gt;&lt;/label&gt;',
      link: function(scope, element, attrs) {
        if (attrs.tooltip) {
          element.addClass('tooltip-title');
        }
      },
    }
  })
  </code></pre>
  
  <p>Everything works fine, at the exception of the <code>attrs.tooltip</code> expression, which always returns <code>undefined</code>, even though the <code>tooltip</code> attribute is visible from Google Chrome's JavaScript console when doing a <code>console.log(attrs)</code>.</p>
  
  <p>Any suggestion?</p>
  
  <p>UPDATE: A solution was offered by Artem. It consisted in doing this:</p>
  
  <pre><code>link: function(scope, element, attrs) {
    attrs.$observe('tooltip', function(value) {
      if (value) {
        element.addClass('tooltip-title');
      }
    });
  }
  </code></pre>
  
  <p>AngularJS + stackoverflow = bliss</p>