Edit in JSFiddle

<!-- アプリケーションコンテナ -->
<div class="container" ng-app="app" ng-controller="AppCtrl" ng-app>

    <!-- ヘッダー -->
    <div class="page-header">
        <h3>
            Fullscreen Overlay Menu
            <small>hugeinc風味</small>
        </h3>
    </div>

    <!-- オーバーレイ表示ボタン -->
    <p style="text-align:center;">
        <button class="btn btn-primary" type="button" ng-click="openFullscreenOverlay();">Open Overlay</button>
    </p>

    <!-- オーバーレイ・レイヤー -->
    <div class="fullscreenOverlay fadeIn fadeOut" ng-show="isFullscreenOverlayActive">

        <!-- アクションバー領域 -->
        <div class="container actionbar">
            <div class="row">
                    
                <!-- オーバーレイ非表示ボタン -->
                <div class="col-xs-2 col-xs-offset-10" style="height:100%; text-align:right;">
                    <button class="btnClose" type="button" ng-click="closeFullscreenOverlay();"></button>                
                </div>
            
            </div>
        </div>
        <!-- アクションバー領域終了 -->

        <!-- メイン領域 -->
        <div class="main">
        
            <!-- メニュー -->
            <nav>
                <ul>
                    <li ng-repeat="item in items">
                        <a href="#" ng-click="closeFullscreenOverlay()">{{item}}</a>
                    </li>
                </ul>
            </nav>

        </div>
        <!-- メイン領域終了 -->
        
    </div>
    <!-- オーバーレイ・レイヤ終了 -->

</div>
<!-- アプリケーションコンテナ終了 -->

/* フルスクリーンオーバーレイ */
.fullscreenOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(153, 204, 51, 0.9);
    display: hidden;
}

/* アクションバー */
.fullscreenOverlay .actionbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    padding: 16px;
}
.fullscreenOverlay .actionbar .row {
    height: 100%;
}

/* フルスクリーンオーバーレイ非表示ボタン */
.fullscreenOverlay .btnClose {
    background: url(http://tympanus.net/Development/FullscreenOverlayStyles//img/cross.png) no-repeat center center;
    width: 80px;
    height: 100%;
    border: none;
    outline: none;
}

/* メイン領域 */
.fullscreenOverlay .main {
    height: 100%;
    padding-top: 80px;
    padding-bottom: 16px;
}

/* メニュー */
.fullscreenOverlay nav {
    position: relative;
    height: 100%;
    text-align: center;
    font-size: 48px;
    overflow: auto;
}
.fullscreenOverlay ul {
    padding: 0;
    margin: 0 auto;
    list-style: none;
    display: inline-block;
}
.fullscreenOverlay ul li {
    display: block;
    height: 80px;
}
.fullscreenOverlay ul li a {
    display: block;
    font-weight: 300;
    color: #fff;
    -webkit-transition: color 0.5s;
    transition: color 0.5s;
}
.fullscreenOverlay ul li a:hover, .overlay ul li a:focus {
    color: #e3fcb1;
}

/* フェードイン開始 */
.fadeIn.ng-hide-remove {
    display: block !important;
    opacity: 0.0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

/* フェードイン終了 */
.fadeIn.ng-hide-remove.ng-hide-remove-active {
    opacity: 1.0;
}

/* フェードアウト開始 */
.fadeOut.ng-hide-add {
    display: block !important;
    opacity: 1.0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

/* フェードアウト終了 */
.fadeOut.ng-hide-add.ng-hide-add-active {
    opacity: 0.0;
}

/* メニュー回転表示トランジション開始 */
.fadeIn.ng-hide-remove nav {
    opacity: 0.5;
    -webkit-transform: translateY(-25%) rotateX(35deg);
    transform: translateY(-25%) rotateX(35deg);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}

/* メニュー回転表示トランジション終了 */
.fadeIn.ng-hide-remove.ng-hide-remove-active nav {
    opacity: 1.0;
    -webkit-transform: translateY(0%) rotateX(0deg);
    transform: translateY(0%) rotateX(0deg);
}

/* メニュー回転非表示トランジション開始 */
.fadeOut.ng-hide-add nav {
    opacity: 1.0;
    -webkit-transform: translateY(0%) rotateX(0deg);
    transform: translateY(0%) rotateX(0deg);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}

/* メニュー回転非表示トランジション終了 */
.fadeOut.ng-hide-add.ng-hide-add-active nav {
    opacity: 0.0;
    -webkit-transform: translateY(25%) rotateX(-35deg);
    transform: translateY(25%) rotateX(-35deg);
}

/**
 * AngularJSアプリケーションコントローラー
 */
var app = angular.module('app', ['ngAnimate']);
function AppCtrl($scope) {
    
    //フルスクリーンオーバーレイはアクティブか？
    $scope.isFullscreenOverlayActive = false;

    //フルスクリーンオーバーレイ表示
    $scope.openFullscreenOverlay = function() {
        $scope.isFullscreenOverlayActive = true;
    }

    //フルスクリーンオーバーレイ非表示
    $scope.closeFullscreenOverlay = function() {
        $scope.isFullscreenOverlayActive = false;
    }

    //メニュー項目
    $scope.items = ['Home', 'About', 'Work', 'Clients', 'Contact'];

} //END AppCtrl()