Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <abc method1="outerMethod('c')" method2="outerMethod2('g')"></abc>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('abc', function() {
    return {
        restrict: "EA",
        replace: true,
        template: "<div><p ng-click='clickedP()'>p</p><div ng-click='clickedDiv()'>div</div></div>",
        controller: function($scope) {
            // how can I call outerMethod if clickedP is executed???
            // how can I call outerMethod2 if clickedDiv is executed???
        },
        controllerAs: "vm",
        link: function(scope, element, attrs, vm) {
            
        }
    }
});


function MyCtrl($scope) {
    $scope.outerMethod = function( a ) {
        alert( "you did it" );
    }
        $scope.outerMethod2 = function( a ) {
        alert( "you did it again" );
    }
}