Custom directive with dynamic attribute using angular JS

Custom directive with dynamic attribute using angular JS

Javascript:

var myApp=angular.module('myApp', []);
myApp.controller('myCtrl', ['$scope', function($scope) { 

  $scope.data= [
               { name: 'A', size: '12' },
               { name: 'C', size: '11' },
               { name: 'B', size: '10' }
              ];

}])
.directive('myOrderList', function(){ 


 function link(scope, element, attrs) {
       var myData=scope.data;    
       console.log(attrs);
   
       var ulElem=element.html('<ol>');
       for(var i=0;i<scope.data.length;i++){              
          ulElem.append('<li>'+scope.data[i][attrs.value]+'</li>');
        }    
   
  }

  return {
    link: link
  };

});

HTML CODE:
<div ng-app="myApp">


<div ng-controller="myCtrl">

 <div my-order-list value="size"></div>
 <div my-order-list value="name"></div>

</div>

</div>