Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<body ng-app="app" ng-controller="GCtrl">
<div authorization><a href="#" ng-click="$$prevSibling.modalToggle()">Sign in</a></div>
<div registration><a href="#" ng-click="$$prevSibling.modalToggle()">Registration</a></div>
</body>

</html>

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

App.directive('registration',function () {
    return {
        controller: ['$scope', '$window', function ($scope, $window) {
            $scope.isRegVisible = false;

            $scope.errors = [];

            $scope.modalToggle = function () {
                console.log('modalToggle registration');
                event.preventDefault();
                $scope.isRegVisible = !$scope.isRegVisible;
            };

        }],
        restrict: 'A',
        template: '<div ng-transclude></div><div  ng-show="isRegVisible" ng-click="modalToggle()">Content</div>',
        transclude: true,
        scope:{}
    }
});
App.directive('authorization',function () {
    return {
        controller: ['$scope', '$window', function ($scope, $window) {
            $scope.isAuthVisible = false;

            $scope.errors = [];

            $scope.modalToggle = function () {
                console.log('modalToggle authorization');
                event.preventDefault();
                $scope.isAuthVisible = !$scope.isAuthVisible;
            };

        }],
        restrict: 'A',
        template: '<div ng-transclude></div><div  ng-show="isAuthVisible" ng-click="modalToggle()">Content</div>',
        transclude: true,
        scope:{}
    }
});

App.controller('GCtrl', function ($scope) {
    
});

/* Styles go here */