Angular: after-render

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
<div ng-controller="MyCtrl">
<div after-render="missionCompled">element</div>

</div>

JavaScript

var myApp = angular.module('myApp',[]);
myApp.directive('afterRender', ['$timeout', function ($timeout) {
        var def = {
            restrict: 'A',
            terminal: true,
            transclude: false,
            link: function (scope, element, attrs) {
                $timeout(scope.$eval(attrs.afterRender), 0);  //Calling a scoped method
                alert(scope.$eval);
            }
        };
        return def;
    }]);



function MyCtrl($scope) {

    $scope.missionCompled = function()
    {
         alert('Done');   
    };
}