var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.arr = [{x:10},{x:20},{x:30}];
var paper = Snap("#diagram");
paper.zpd();
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS svg with zoom and pan Plunker</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg.zpd/0.0.11/snap.svg.zpd.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<svg id="diagram" style="border: solid 1px #ccc; width: 400px; height:400px;" class="svg-drop" height="500px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id="group" >
<image x="0" y="0" width="784" height="391" xlink:href="http://www.slashroot.in/sites/default/files/advanced%20static%20routing%20config.png"></image>
<rect ng-repeat="ar in arr" ng-attr-x="{{ar.x + 30}}" ng-attr-y="{{ar.x + 150}}" width="25" height="25" fill="red"></rect>
<rect x="0" y="0" width="25" height="25" fill="red"></rect>
</g>
</svg>
</div>
</body>
</html>
<g>
<rect
stroke="blue" fill="none" opacity="0.4"
ng-attr-x="{{activeBox.boundingBox.box.x - 3}}"
y="150"
width="50"
height="50"
ng-attr-transform="matrix({{activeBox.boundingBox.transform}})"
></rect></g>