AngularJS component use N times dynamically - angularjs

Question

I am new in AngularJS and I am using component in my module.
I have module:
angular.module("reviewApp",[]).component("applicantDetails",{
templateUrl : '../comp/Applicant_Details_Fields.html',
controller : function($scope){...}
});
At this moment I can use my component from HTML code like this
<applicant-details></applicant-details>
But now I need to change it to be more flexible. Depending on given N value it must add that component in the HTML N times.
For example N = 3; then it must dynamically add in my html code 3 times
<applicant-details></applicant-details>
Can I achieve this functionality with AngularJS with simple way? I tried several ways, and searched many times, but I couldn't find how to do this.
Even I tried to add that tags with JavaScript, but it understands only empty tags without content.

Answer 1

This is an example of simple looping in angular js
<div ng-app="myapp">
<div ng-controller="ctrlParent">
<ul>
<li ng-repeat="i in getNumber(myNumber) track by $index"><span>{{$index+1}}</span></li>
</ul>
<ul>
<li ng-repeat="i in getNumber(myOtherNumber) track by $index"><span>{{$index+1}}</span></li>
</ul>
</div>
var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
$scope.myNumber = 5;
$scope.myOtherNumber = 10;
$scope.getNumber = function(num) {
return new Array(num);
}
});
check output:http://jsfiddle.net/sh0ber/cHQLH/