template.html

<div qv-extension style="height: 90%; position: relative; overflow: auto;" id ="ExtObj_Container" class="bootstrap_inside ng-scope">

<div ng-show="numOfElements > limits.maxObjs">

<div class="alert alert-warning" role="alert">
  <h2 class="alert-heading">{{limits.warnTitle}} <span class="badge badge-danger">{{numOfElements}}</span></h2>
  <h4>{{limits.warnText}}</h4>
</div>
</div>

<div ng-hide="numOfElements > limits.maxObjs" height="100%">

    <div class="collapse" id="collapseExample">
      <div class="well">
        <h1>{{Table.ObjName | limitTo: 20}}{{Table.ObjName.length > 20 ? '...' : ''}}</h1>
        
         <dl ng-repeat="(k,v) in AddInfo" class="dl-horizontal">
          <dt>{{k}}</dt>
          <dd>{{v| limitTo: 60}}{{v.length > 60 ? '...' : ''}}</dd>
        </dl>     
      </div>
    </div>




      <svg id="Line" width="100%" height="100%">
          <marker id="freccia" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
            <path d="M0,0 L0,6 L9,3 z" fill="#afafaf" />
             <!-- <path d="M0,0 L0,6 L9,3 z" fill="{{arrow[6]}}" /> -->
          </marker>

        <g ng-repeat="arrow in arrowPosition">
          <line class="linkBetweenObj"  ng-x1="{{arrow[0]}}" ng-y1="{{arrow[1]}}" 
                                        ng-x2="{{arrow[2]}}" ng-y2="{{arrow[3]}}"  
                                        marker-end="url(#freccia)"
                                        stroke-width="1.5" stroke="{{arrow[6]}}"/>
        </g>

        <g ng-repeat="ele in elePosition">

         <image xlink:href="{{ele.icon}}"   ng-x="{{ele.wPos}}" ng-y="{{ele.hPos}}" 
                                            height="30px" width="30px" 
                                            ng-mouseover="writeTable(this)" 
                                            ng-mouseout="cleanTable(this)"
                                            ng-click="makeASelection(this)"/> 
        </g>
      </svg>	
</div>

</div>