AngularJS: How to bind ng-click to an SVG image inserted using embed or object element

Question

I want to display an SVG image stored in a file and bind an angularJs ng-click function to the image.

I've tried putting the ng-click binding in the object/embed element tag as well as a wrapper div tag, but neither are working.

Does anyone know how to do this?

Attempted html:

<object ng-click="clickItem()" data="file.svg"></object>

<embed ng-click="clickItem()" src="file.svg/>

<div ng-click="clickItem()">
    <object data="file.svg"></object>
</div>

<div ng-click="clickItem()">
    <embed src="file.svg"/>
</div>

Resulting html after load:

<object ng-click="clickItem()" data="file.svg">
    #document
    xml-stylesheet
    <svg ~svg contents....~></svg>
</object>

And the click does not register in any of the listed cases.

Answer 1

You can use SVG as regular images in all modern browsers (http://caniuse.com/svg-img).

<img ng-click="clickItem()" src="file.svg"/>

See it in action: http://jsfiddle.net/YJKnD/