title: Change the view based on screen size
body: <p>I am aware of a similar question being asked before:</p>
  
  <p><a href="https://stackoverflow.com/questions/25620368/change-the-templateurl-of-directive-based-on-screen-resolution-angularjs">Change the templateUrl of directive based on screen resolution AngularJS</a></p>
  
  <p>This was first asked over a year ago and since then AngularJS got changed a bit. I am curious to find out if there are any other ways to achieve something similar as I haven't found many information about templateUrl swapping, so maybe I am barking up the wrong tree here.</p>
  
  <p>I have a single page app without any routes.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;body ng-app="App"&gt;
    // lots of html same for both desktop/mobile
    &lt;my-dir&gt;&lt;/my-dir&gt;
    // even more here
  &lt;/body&gt;
  </code></pre>
  
  <p>template 1:</p>
  
  <pre><code>&lt;p&gt;Mobile&lt;/p&gt;
  </code></pre>
  
  <p>template 2:</p>
  
  <pre><code>&lt;p&gt;Desktop&lt;/p&gt;
  </code></pre>
  
  <p>I would like to render <strong>template 1</strong> when the screen goes below 700px and <strong>template 2</strong> otherwise. The templates change just what is inside <strong>my-dir directive</strong>. For example Template 1 renders list and template 2 renders table.</p>
  
  <p>Another requirement would be to make it responsive if possible(aka templates would change as you resize the window) </p>
  
  <p>At the moment I can use the solution from the above questions but are there any other ways to do it?</p>