javascript - How to assign to .component() an isolated scope object, and to access it in it's template -

i have daunting task ahead of me, rather new angularjs. help, or advise appreciated. goal achieve have controller loop through array of objects, each objects "compile" or "interpolate" component, each of these child component having isolated scope [i]-th object.

i got component display objects value model, not isolated scope. , interpolation display markup string, gets value in it should.

so in bit of trouble figuring out, how accomplish this.

here code component:

 angular.module('mpwatchmodule').component('mpoint', {     bindtocontroller: false,     templateurl: '/ng-mpwatch/templates/mpoint.html',     controller: mpdatacontroller,     bindings: {         mpdata:'<',     } }); 

here template:

<div>    <h2>test</h2>     <h1>{{$ctrl.testdata}}</h1>     <h2>{{test}}</h2> </div> 

the page markup trying display:

   <li>      <m-point mpdata="{{mpd.mpdata}}"></m-point>    </li>             <li>                 <div>                     {{mpd.intertest}}                 </div>             </li> 

and appropriate portion controller:

   var mpd = this;      var subscope = {         testdata: 'this test',     }      mpd.mpdata = {         test: 'object other test',         }; var templatestring = '<m-point id="{{testdata}}"></m-point>';     var intertestlocal = '';      (var = 0; < 5; i++) {         intertestlocal += templatestring;      };      mpd.intertest = interpolate(intertestlocal)(subscope); 

and here output get:

sofar tinkering right, 1st object isolated scope of component, , access template display. 2nd loop trough object array , assign each object component, , have template sent dom.

these objects once on page, not need parent, should doing own thing, , efficient possible when page load.

note: $scope.testdata not displaying due <m-point mpdata="{{mpd.mpdata}}"></m-point> aware, attempt object in there. othervise display string main model.

thank in advance.