AngularJS + JQuery : How to get dynamic content working in angularjs

Question

I am working on a Ajax app using both jQuery and AngularJS.

When I update content (which contains AngularJS bindings) of a div using jQuery's html function, the AngularJS bindings doesn't work.

Following is code of what I am trying to do:

$(document).ready(function() {    $("#refreshButton").click(function() {      $("#dynamicContent").html("<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>")    });  });

</style><script src="http://docs.angularjs.org/angular-1.0.1.min.js"></script><style>.ng-invalid {    border: 1px solid red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="">    <div id='dynamicContent'>      <button ng-click="count = count + 1" ng-init="count=0">          Increment        </button>      <span>count: {{count}} </span>    </div>        <button id='refreshButton'>      Refresh    </button>  </div>

I have dynamic content inside a div with the ID #dynamicContent, 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.

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.

Answer 1

You need to call $compile on the HTML string before inserting it into the DOM so that angular gets a chance to perform the binding.

In your fiddle, it would look something like this.

$("#dynamicContent").html(   $compile(     "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"   )(scope) ); 

Obviously, $compile must be injected into your controller for this to work.

Read more in the $compile documentation.