I am trying to create a custom tag using angularJs. This tag has an attribute named data. data gets it value like this <skillviz data="{{user.info}}"></skillviz>. user.info is a JSON object. But when i try to access this data attribute in my directive definition, I get undefined. What is the correct way to do this ?

html code

<div id="info-box" ng-repeat="user in users | orderBy:orderProp">            
          <div id="skill-block">
            <skillviz height="50" data="{{user.skills}}"></skillviz>
          </div>
      </div>

users is a JSON type object, declared in the controller. So basically users will be a list(array) of 

{"first_name": "Tifanny",

        "last_name": "Maxwell",
        "skills": [
            {"name": "Java", "score": 4.8, "color" : "red"},
            {"name": "C++", "score": 4.0, "color" : "blue"},
        ]
    },

services.js

angular.module('yott', []).directive('skillviz', function () {
return {
    restrict: 'E',
    link: function (scope, element, attrs) {
        element.html("<script>alert(" + attrs['data'] + ")</script>");
        });
    }
  }
});

alert box pops up saying undefined

javascript json angularjs
Edit
Report