title: Dynamically manipulate attribute values of Angular directive template
body: <p>I have a directive in this format:</p>
  
  <pre><code>&lt;img id="imgId" src="img/sample.jpg" border="0" width="100%" usemap="#image-maps-sample" alt="" /&gt;
  &lt;map name="image-maps-sample" id="sampleMap"&gt;
      &lt;area  alt="" title="" href="#/abc" shape="poly" coords="132,884,219,778,258,767,129,995,140,976" style="outline:none;" target="_self"/&gt;
      &lt;area  alt="" title="" href="#/xyz" shape="poly" coords="1147,963,1139,951,1135,920,1137,893,1173,990,1156,978" style="outline:none;" target="_self"/&gt;
  &lt;/map&gt;
  </code></pre>
  
  <p>The image is set to a flexible width i.e 100%, hence it will take the screen's full width and can change from the actual size 1920*1080.</p>
  
  <p>What's the best way to dynamically manipulate the co-ordinates of the 2 image map areas based on the rendered width. I would be using the scale down/up formula for the co-ordinates, but I am unsure of the method to fetch the attribute values and update them after applying the formula to the pairs.</p>
  
  <p>I have tried using the link function of the directive, but was unsuccessful. </p>