title: AngularJS: How to bind ng-click to an SVG image inserted using embed or object element
body: <p>I want to display an SVG image stored in a file and bind an angularJs ng-click function to the image. </p>
  
  <p>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. </p>
  
  <p>Does anyone know how to do this?</p>
  
  <p>Attempted html:</p>
  
  <pre><code>&lt;object ng-click="clickItem()" data="file.svg"&gt;&lt;/object&gt;
  
  &lt;embed ng-click="clickItem()" src="file.svg/&gt;
  
  &lt;div ng-click="clickItem()"&gt;
      &lt;object data="file.svg"&gt;&lt;/object&gt;
  &lt;/div&gt;
  
  &lt;div ng-click="clickItem()"&gt;
      &lt;embed src="file.svg"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Resulting html after load:</p>
  
  <pre><code>&lt;object ng-click="clickItem()" data="file.svg"&gt;
      #document
      xml-stylesheet
      &lt;svg ~svg contents....~&gt;&lt;/svg&gt;
  &lt;/object&gt;
  </code></pre>
  
  <p>And the click does not register in any of the listed cases. </p>