javascript - Angular 1.5 - Component to retrieve html with data -

i'm needing angular component method. have main html main controller, in have json list of client data like:

  clients: [{      "name": "john jackson",      "age": "21",      "hair": "brown",    }, {      "name": "janet doe",      "age": "19",      "hair": "blond",    }]

i need display client data in main html thought use angular component (never used before). created html template component (using bootstrap btw), quite simple like:

<div class="row">            <label>name: {{client.name}}</label>            <label>age: {{client.age}}</label>            <label>hair: {{client.hair}}</label>     </div>

so need use ng-repeat in main.html, looping clients. each client in list need add row div of component. possible? need pass client info (each client, not list) component, , 1 has return html each client.

in examples found, component counts necessary information (client), in case information in main controller, , need pass controller (as have different scopes).

the idea component called in different views.

if give me first step (or nice example of similar situation) awesome.

thanks lot in advance!

why can't use directive, that's associated template(.html) uses ng-repeat , display list of clients, can used view making scope isolate if required.

the controller, directive looks below,

angular.module('sample', []).controller('maincontroller', function($scope) {   $scope.clients =  [{     "name": "john jackson",     "age": "21",     "hair": "brown",   }, {     "name": "janet doe",     "age": "19",     "hair": "blond",   }]; });  angular.module('sample', []).directive('mydirective', function() {   return {     templateurl: 'my-template.html'   }; }); 

my-template.html:

<div class="row" ng-repeat="client in clients>      <label>name: {{client.name}}</label>      <label>age: {{client.age}}</label>      <label>hair: {{client.hair}}</label>    </div> 

main.html:

<div ng-controller="maincontroller">   <div my-directive></div> </div>