title: Same element id's on different pages of AngularJS app
body: <p>I'm very new to AngularJS, and am working to convert an existing web application written using JQuery and Bootstrap to one using AngularJS and Ionic.</p>
  
  <p>I have 3 pages in my web application, each with a html5 canvas and a button. The canvas layout and styling are exactly the same on each page, however the button draws a different thing to each canvas, e.g. on page 1 draw a dog, page 2 a cat, and page 3 a chicken.</p>
  
  <p>Because of this, I use the same element ID's between the three pages, e.g. '#myCanvas' for the canvas. I have a Javascript object called 'Drawer', which draws the relevant thing to '#myCanvas' when the relevant button is pressed.</p>
  
  <p>When converting to AngularJS, I placed each page into a template, and converted the 'Drawer' object into a factory called DrawFactory. Each page is linked to a different controller that uses DrawFactory.</p>
  
  <p>My problem is that, say for example I'm on page 2 and click the draw cat button, it draws it to the #myCanvas on page 1. Previously this wasn't a problem as each page loaded separately and therefore all ids were unique.</p>
  
  <p>How can I achieve what I want without renaming each of the canvases to (for example) #myCanvas1, #myCanvas2, #myCanvas3- and creating 3 separate DrawFactories that individually draw to one of them?</p>
  
  <p>I'm sure I'm just missing some key AngularJS concept. Thanks. </p>