title: Angularjs with Ajax response bind to a div
body: <p>I have to implement angular inside a "ASP.net MVC/web api" project.
  My challenge is that i have a single page type of application, with Main.vbhtml as main container. There is also a layout.vbhtml
  All remaining page get display inside Main, by using ajax call and load inside a DIV.<br/>
  I created a new page pagenew.vbhtml and put my angular content in there. When i click on the menu my ajax call return  the content of pagnew in response and bind to my div. We use this way because of the tabs (meaning i can open pagenew many time in tab control)<br/>
  The problem is that my angular does not work at all. 
  <br/>
  I render my angular code in layout.vbhtml   @Scripts.Render("~/bundles/ng")<br/>
  Here is my ajax call and my angular<br/><br/></p>
  
  <pre><code>&lt;script&gt;function loadMyPage() {
  $("#div1").load("http://localhost:52269/pagenew.vbhtml");}&lt;/script&gt;
  </code></pre>
  
  <p>My pagenew.vbhtml is</p>
  
  <pre><code>                                &lt;div ng-app&gt;
                                      &lt;p&gt;{{ "Hello" + " World" }}&lt;/p&gt;
                                      &lt;p&gt;{{ 2 + 4 }}&lt;/p&gt;
                                  &lt;/div&gt;
  </code></pre>
  
  <p>and my Main page (container) has the div </p>
  
  <pre><code>&lt;div id="div1" &gt;&lt;/div&gt;here
  </code></pre>
  
  <p>PS: i have the angular.js in the layout.vbhtml</p>
  
  <blockquote>
    <p>the result:{{ "Hello" + " World" }}{{ 2 + 4 }}</p>
  </blockquote>
  
  <p>HELP! Please</p>