<body ng-app='MainApp'>
<div ng-controller='MainCtrl'>
<div>
<div>Parse: {{parse}} - {{parse_assign}}</div>
<div>Interpolate: {{interpolate}}</div>
<div>Compile : {{$compile}}</div>
</div>
</div>
</body>
var mainMod = angular.module('MainApp', []);
mainMod.controller('MainCtrl', ['$scope','$parse','$interpolate','$compile',
function ($scope,$parse,$interpolate,$compile) {
$scope.name = 'Manish';
//$parse
$scope.parse = $parse('name')($scope);
$parse('name').assign($scope,'Prakash');
$scope.parse_assign = $parse('name')($scope);
$scope.button_text = 'click me';
//$interpolate
var html = '<div ng-click="clickme();">{{button_text}}</div>';
$scope.interpolate = $interpolate(html)($scope);
//$compile
$scope.compile = $compile(html)($scope);
//its best to use compile only in directives
}
]);
This Pen doesn't use any external CSS resources.