title: AngularJS + JQuery : How to get dynamic content working in angularjs
body: <p>I am working on a Ajax app using both jQuery and AngularJS. </p>
  
  <p>When I update content (which contains AngularJS bindings) of a div using jQuery's <code>html</code> function, the AngularJS bindings doesn't work.</p>
  
  <p>Following is code of what I am trying to do:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#refreshButton").click(function() {
      $("#dynamicContent").html("&lt;button ng-click='count = count + 1' ng-init='count=0'&gt;Increment&lt;/button&gt;&lt;span&gt;count: {{count}} &lt;/span&gt;")
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;/style&gt;&lt;script src="http://docs.angularjs.org/angular-1.0.1.min.js"&gt;&lt;/script&gt;&lt;style&gt;.ng-invalid {
    border: 1px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app=""&gt;
    &lt;div id='dynamicContent'&gt;
      &lt;button ng-click="count = count + 1" ng-init="count=0"&gt;
          Increment
        &lt;/button&gt;
      &lt;span&gt;count: {{count}} &lt;/span&gt;
    &lt;/div&gt;
  
  
    &lt;button id='refreshButton'&gt;
      Refresh
    &lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have dynamic content inside a div with the ID <code>#dynamicContent</code>, and I have a refresh button that would update contents of this div when refresh is clicked. Increment works as expected if I don't refresh the content, but after I refresh, the AngularJS binding stops working.</p>
  
  <p>This may not be valid in AngularJS, but I initially built application with jQuery and started using AngularJS later on so I can't migrate everything to AngularJS. Any help with getting this working in AngularJS is greatly appreciated. </p>