AngularJS and SVG - using ng-click on a <rect> element?

Question

Problem: I want to run the test function when I click on the <path> element in the SVG graph. Nothing happens right now when I click on an item. HOWEVER - when I replace ng-click with onclick="alert('success')" , the warning works fine. Any suggestions?

In my code ...

section of my html ...

 <div ng-controller="converter"> <embed src="/image.svg"> <!--This button successfully runs the test function--> <button ng-click="test()">Test</button> </div> 

my app.js ...

 var app = angular.module('app', []); app.controller('converter', ['$scope', '$http', function($scope, $http){ $scope.test = function(){ console.log("this click event is working"); } }]); 

part of my embedded SVG file ...

 <rect id="e1-1-2" data-name="e1-1" class="cls-35" x="14" y="106" width="57" height="22" ng-click="test()"/> 

(Here's the full code for those interested: https://github.com/cwklausing/angular_guitar )

Answer 1

Wrap it inside svg

 <svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" ng-click="test()" /> </svg> 

Here is a working Plunker