For example, in the following fiddle:
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?
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);
});
});
Heres an example from the angularjs documentation on how to update angular when you update the DOM outside of the angular scope.
var $div = $('<div ng-controller="MyCtrl">{{content.label}}</div>');
$(document.body).append($div);
angular.element(document).injector().invoke(function($compile) {
var scope = angular.element($div).scope();
$compile($div)(scope);
});
Full documentation is at the bottom of this page.
