AngularJS - Simple Directive Use

by supercobra

HTML

<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<script src="http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-datepicker/css/bootstrap.css">
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css">
<div ng-app="myApp" ng-controller="Ctrl">
   <pretty-tag>{{abc}}</pretty-tag>
</div>

JavaScript

angular.module('myApp', [])
    .controller('Ctrl', ['$scope', function($scope) {
        $scope.abc="directive testing"
    }])
.directive('prettyTag', function($interpolate) {

return {
    restrict: 'E',
    link: function(scope, element, attrs) {
        var text = element.text();
        var e = $interpolate(text)(scope);
        // =============> problem e is always empty

        var htmlText = "<b>" + e + "</b>";
        element.html(htmlText);
    }
};

});