Edit in JSFiddle

angular.module('module', []).directive('panel', function() {
    return {
        restrict: 'A',
        scope: true,
        controller: function($scope, $element) {
            $element.addClass("panel");
            $scope.active = false;
            $element.hover(function() {
                $scope.active = true;
                $scope.$apply();
            }, function() {
                $scope.active = false;
                $scope.$apply();
            });
        }
    };
}).directive('options', function() {
    return {
        restrict: 'E',
        require: '^panel',
        link: function(scope, element) {
            element.addClass("options");
            scope.$watch('active', function(newValue) {
                if (newValue) {
                    element.show();
                } else {
                    element.hide();
                }
            });
        }
    };
});;

<div ng-app="module">
<div panel>
    <h3>Personal Data</h3>
    <options>
        <a href="#" class="button add">Edit</a>
    </options>
    Some panel content
</div>
</div>

h3 {
    font-weight: bold;
}

.panel {
    width: 250px;
    position: relative;
    padding: 10px;
    margin: 10px;
    border: 1px solid #000;
}

.panel .options {
    position: absolute;
    right: 5px;
    top: 5px;
}