Q:

How do I get AngularJS to bind to HTML set by jQuery?

For example, in the following fiddle:
http://jsfiddle.net/NFNvc/28/
var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
    $scope.test1 = 'Hello world';
    $scope.test2 = 'Hello new';
});

$(function() {
    $("#text").html("{{test2}}");
});

AngularJS is not binding to the variable 'test2. How do I get it to do so?

A:

If you can include the jQuery lines within the controller, then use the scope variable rather than curly braces.
app.controller('MainCtrl', function($scope) {
    $scope.test1 = 'Hello world';
    $scope.test2 = 'Hello new';

    jQuery(function() {
        jQuery("#text").html($scope.test2);
    });
});

