javascript - Issue with Angular Directive Usage -

hi have requirement array of elements attribute directive, , based on size of array objects have iterate , create template.please find js class below.

mainapp.directive('student', function() {     var directive = {};     directive.restrict = 'e';     directive.template = "student: <b>{{student.name}}</b> , roll no: <b>{{student.rollno}}</b>";      directive.scope = {         student : "=name"     }      directive.compile = function(element, attributes) {        element.css("border", "1px solid #cccccc");         var linkfunction = function($scope, element, attributes) {             (i = 0;i<$scope.student.length;i++){                element.html("student: <b>"+$scope.student[i].name +"</b> , roll no: <b>"+$scope.student[i].rollno+"</b><br/>");             }         }          return linkfunction;      }       return directive; }); 

my data

$scope.students = [     {         name:"testname1",         rollno:2     },     {         name:"testname2",         rollno:1     } ]; 

and html

<student name="students"></student><br/> 

also working example available in plunker.

the issue first student object overwritten second one. please let me know how can correct it.

your element.html updates html of element. updating content multiple times, last update see. use element.append, append templates during iteration.