title: AngularJS how to bind data with SVG widget
body: <p>I know that this is usually not the way to use AngularJS but I was wondering if what I want to achieve is doable with AngularJS. If this is not the recommended way could you please provide hints on how to achieve this? Please consider that I am new in the web programming area.</p>
  
  <p>So in my project I draw using SVG &amp; RaphaelJS several widgets on a canvas that is placed within the "holder" div. I am trying to bind this widgets to data using AngularJS, basically each widget is linked to an object in the CustomController. How can I access the CustomController when I initialize my widgets?</p>
  
  <pre><code>&lt;html lang="en" style="height: 100%;"  ng-app="myApp"&gt;
  &lt;head&gt;
    &lt;script type="text/javascript""&gt;
      $(document).ready(function () {
        var canvas = Raphael('holder', '800', '600');
        var widget1 = new Widget1(params);
        // initialize widgets here, that I need to bind to data using AngularJS
        // I am not able to access the CustomController here when drawing my widgets
      });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="holder" ng-controller="CustomController"&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is this anyway to achieve data binding on SVG widgets using AngularJS? I am starting to think that this is not the purpose of AngularJS..in this case could you please advise me on how to do this?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Guys thanks a lot for your answers! The requirement is that the widget accepts user input and I want it not to be placed in the html file (for modularity purposes). So the directive seems to be the primary choice for now. In the link method I would draw the widget using RaphaelJS and I can also draw the editable objects but this way I would not properly use the AngularJS binding mechanism, it would be just watches and event handlers...which seems messy to me. It would have been nice if some way I could've put SVG tags in the template property of the directive and do biding in the template, but that does not seem to be supported. </p>
  
  <p>Do you guys have other ideas on this?</p>
  
  <p>Btw is there any way to apply bindings programatically between a property and a HTML element (eg. textbox) obtained with jQuery?</p>
  
  <p>Regards</p>