title: angularjs replace entire div when on click
body: <p>Let say I have a </p>
  
  <pre><code>&lt;div class="leftbar"&gt;
   &lt;div class="leftcontent&gt;
   This is leftbar
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and a right bar</p>
  
  <pre><code>&lt;div class="rightbar"&gt;
   &lt;div class="rightcontent"&gt;     
   This is rightbar
   &lt;button&gt;I have a button here&lt;/button&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When the rightbar button is clicked, I want to get data from wherever then replace
  entire <code>div left content</code> and <code>div right content</code> with <code>new div with {{data}}</code></p>
  
  <p>I haven't try anything yet because I have no idea how to start this.
  And I also know we can do this by using share service and pass value to other <code>ng-controller</code> but my problem is how to replace the entire div without navigate to another url. </p>
  
  <p>Any idea?</p>