angularjs - Reference Angular binding from javascript -

i'm looking (best-practice) way iterate through list of elements in scope of angular controller , generate div element specific id , append svg element specific div. i'm new angular...and suspect following attempt fails because misunderstand angular bindings?

what better way following:

<div id="top_level"> <div ng-repeat="item in items">   <div id={{item.id}}>     <script type="text/javascript">       var svg_img = build_svg(args);       document.getelementbyid({{item.id}}).appendchild(svg_img);     </script>   </div> </div> </div> 

thanks!

you should place logic inside of controller , conditionally render html necessary rather invoking script tag inside of ng-repeat..

<div ng-controller="yourctrl">   <div id="top_level">     <div ng-repeat="item in items">       <div id={{item.id}}></div>       <div ng-bind-html="$scope.buildsvg(item)">       </div>     </div>   </div> </div> 

in angular controller, add function build out , return svg render.

app.controller('yourctrl', ['$scope', function ($scope) {     $scope.buildsvg = function (item) {         // add logic here.     } });