title: Changing a view in single page Angular app
body: <p>I'm very new to Angular and have built a very basic site to host some of my art on. At the moment I have an HTML page (homepage) with an <code>&lt;a ng-href&gt;</code> which, when clicked, loads another HTML page with all my work on it. So I have two HTML pages which means things have to load twice on my site. This is not very practical.</p>
  
  <p>This is the HTML on my homepage. The <code>&lt;a ng-href&gt;</code> is contained inside of the custom directive <code>&lt;front-page&gt;</code>:</p>
  
  <pre><code>&lt;div ng-controller="artCtrl" class="content"&gt;
  
    &lt;front-page info="image_1"&gt;&lt;/front-page&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><code>&lt;front-page&gt;</code> directive:</p>
  
  <pre><code>&lt;a ng-href="work.html"&gt;
   &lt;img ng-src="{{ info.images }}" alt="Image not found" width="40%" height="40%"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>The content on the second HTML page is also inside of a custom directive which looks like this:</p>
  
  <pre><code>&lt;div ng-repeat="x in info"&gt;
   &lt;img class="image" ng-src="{{ x.image }}"&gt;&lt;/img&gt;
   &lt;p class="name"&gt;{{ x.name }}&lt;/p&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>I want to be able to <code>ng-click</code> on the <code>&lt;a ng-href&gt;</code> on the homepage and render the HTML in the directive on my second page, all on the same page (so, without loading a whole other page). 
  But I have no idea what the best way to do this would be. Routing seems a bit unnecessary for such a simple site and I'm not sure if using <code>ng-show</code> or <code>ng-hide</code> would be suited for this. </p>
  
  <p>Please let me know if you're confused by this question, I would really appreciate any help.</p>