title: How to get attribute value of a custom tag in angularjs?
body: <p>I am trying to create a <em>custom tag</em> using angularJs. This tag has an attribute named <code>data</code>. <code>data</code> gets it value like this <code>&lt;skillviz data="{{user.info}}"&gt;&lt;/skillviz&gt;</code>. <code>user.info</code> is a JSON object. But when i try to access this <code>data</code> attribute in my directive definition, I get <code>undefined</code>. What is the correct way to do this ?</p>
  
  <p><strong>html code</strong></p>
  
  <pre><code>&lt;div id="info-box" ng-repeat="user in users | orderBy:orderProp"&gt;            
            &lt;div id="skill-block"&gt;
              &lt;skillviz height="50" data="{{user.skills}}"&gt;&lt;/skillviz&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><code>users</code> is a JSON type object, declared in the controller. So basically <code>users</code> will be a list(array) of </p>
  
  <pre><code>{"first_name": "Tifanny",
  
          "last_name": "Maxwell",
          "skills": [
              {"name": "Java", "score": 4.8, "color" : "red"},
              {"name": "C++", "score": 4.0, "color" : "blue"},
          ]
      }, 
  </code></pre>
  
  <p><strong>services.js</strong></p>
  
  <pre><code>angular.module('yott', []).directive('skillviz', function () {
  return {
      restrict: 'E',
      link: function (scope, element, attrs) {
          element.html("&lt;script&gt;alert(" + attrs['data'] + ")&lt;/script&gt;");
          });
      }
    }
  });
  </code></pre>
  
  <p>alert box pops up saying <strong>undefined</strong></p>