AngularJS – $compile $parse $interpolate

AngularJS provide three useful services which it uses internally., $compile, $parse, $interpolate. These service are mainly used to evaluate expression and rendering UI.

$compile: This service converts a html string in a fully functional DOM element. The resulting DOM would have all linking, events working just like a DOM element. This uses $parse internally for evaluating expressions. e.g usage of $compile would be

var html = '<div ng-click='clickme();'>{{text}}</div>';

$compile is mostly used inside custom directives and doesn’t have much use outside.

$interpolate : This service is used to evaluate angular expressions. You can run an entire string against a scope, and interpolate will give the result. e.g would be

var string = 'My Name is {{name}}';
$ = 'Manish';
$interpolate(string)($scope); //this will result in My Name is Manish

$parse : This service is used as a getter/setter for single variables only. e.g would be

$scope.text = 'abc';
$parse('text')($scope); //this will result in abc

Below codepen is used demonstrate all 3 in action