<main class=" container cr-paper-container" ng-app="myApp" ng-controller="MainCtrl">  
  <!-- BEGIN PAPER TEMPLATE -->
  <section>
    <header class="clearfix">
      <h1 ng-if="header.headerLeft"  ng-bind="header.headerLeft.text" class="header-left"></h1>
      <h1 ng-if="header.headerRight" ng-bind="header.headerRight.text | date" class="header-right"></h1>
    </header>
    
    <div class="cr-paper-margin"></div>
    
    <div class="cr-paper-body">
      <hr ng-repeat="line in lines track by $index"/>
      <div class="cr-paper-contents" ng-bind="body.text"></div>
    </div>
  </section>
  <footer class="text-center">
    <p>
      Crafted with love by <a href="https://codepen.io/xavisavvy">xavisavvy</a>
    </p>
  </footer>
  <!-- END PAPER TEMPLATE -->

  <!-- BEGIN PAPER DIRECTIVE -->
  <paper header-left="" header-right="" body=""></paper>
  <!-- END PAPER DIRECTIVE -->
  
  <!-- BEGIN CONTROLS SECTION -->
  <section class="cr-paper-controls panel panel-primary">
    <header class="panel-heading">
      <h1>Controls</h1>
    </header>
    <div class="panel-body">
      
      <div ng-repeat="h in header" class="cr-controls-input">
        <label for="{{h.class}}" ng-bind="h.title"></label>
        <div class="input-group" title="{{h.title}}">
          <span class="input-group-addon">
            <i class="fa fa-pencil"></i>
          </span>
          <input type="text" id="{{h.class}}" class="form-control" ng-model="h.text" placeholder="{{h.title}}" ng-if="!h.disabled" />
          <input type="text" id="{{h.class}}" class="form-control" ng-model="h.text" placeholder="{{h.title}}" disabled ng-if="h.disabled" />
        </div>
      </div>
      
      <div class="cr-controls-input">
        <label for="{{body.class}}" ng-bind="body.title"></label>
        <div class="input-group" title="{{body.title}}">
          <span class="input-group-addon">
            <i class="fa fa-pencil"></i>
          </span>
          <textarea type="text" id="{{body.class}}" ng-model="body.text" placeholder="{{body.placeholder}}" class="form-control"></textarea>
        </div>
      </div>
    </div>
  </section>
  <!-- END CONTROLS SECTION -->
</main>
@import "compass/css3";

$redSideBorder: 2px solid rgba(255,0,0,0.5);
$bodyLineHeight: 30px;
$bodyMarginWidth: 10%;
$headingHeight: 100px;

body{
  background: grey;
  font-family: 'Indie Flower', cursive;
  line-height: 100%;
  button{
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
  }
  footer{
    position:fixed;
    bottom:0;
    right:0;
    left:0;
    z-index:1500;
    background:white;
    padding:1%;
    @include box-shadow();
  }
}

.cr-paper-controls{
  $paperControlInputMargin: 10px;
  position: fixed;
  left:15px;
  top:50px;
  width:300px;
  z-index: 200;
  @include box-shadow(0 1px 3px rgba(0,0,0,0.5));
  transition: all 0.2s ease-in-out;
  @include opacity(0.25);
  
  .cr-controls-input{
    margin-top:$paperControlInputMargin;
    &:first-child{
      margin-top: 0;
    }
  }
  &:hover{
    @include box-shadow(1px 3px 5px rgba(0,0,0,0.5));
    @include opacity(1);
  }
  &:active{
    @include box-shadow(2px 5px 7px rgba(0,0,0,0.5));
  }
}

.cr-paper-container{
  position:relative;
  background: #F8F8F0;
  margin-top:1%;
  margin-bottom:1%;
  height:1608px;
  padding:0;
  @include box-shadow(0 1px 2px rgba(0,0,0,0.75)); 
  overflow:hidden;  
  header{
    position: relative;
    min-height: $headingHeight;
    padding-left: 0.5%;
    
    h1{
      position:absolute;
      display: block;
      margin:0 $bodyMarginWidth;
      bottom:0;
      @include opacity(0.8);
      &.header-right{
        right:0;
        text-align:right;
      }
      &.header-left{
        left:$bodyMarginWidth / 10;
        text-align:left;
      }
    }
  }
  
  .cr-paper-margin{
    position:absolute;
    top:0;
    bottom:0;
    width:$bodyMarginWidth;
    border-right: $redSideBorder;
    z-index: 100;
  }
  
  .cr-paper-body{
    hr{
      border: 1px solid rgba(0,100,255,0.5);
      z-index:0;
      margin-top:$bodyLineHeight;
      &:first-child{
        margin-top:0;
      }
    }
    
    .cr-paper-contents{
      position: absolute;
      left: $bodyMarginWidth + 0.5%;
      top: $headingHeight + 10;
      font-size: 1.2em;
      line-height: $bodyLineHeight + 2;
      z-index: 101;
      @include opacity(0.8);
    }
  }
}

View Compiled
angular.module('myApp', ['myApp.directives', 'myApp.controllers']);

angular.module('myApp.controllers', [])
  .controller('MainCtrl', ['$scope', function($scope) {
    $scope.header = {
      headerLeft: {
        text: 'Xavisavvy the savvy chap',
        title: 'Page Header - Left',
        class: 'header-left',
        disabled: null
      },
      headerRight: {
        text: new Date(),
        title: 'Page Header - Right',
        class: 'header-right',
        disabled: 'disabled'
      },
    };
    $scope.body = {
      text: 'This is the default text for the page. Feel free to edit it! It even allows for line breaks!',
      title: 'Body Text',
      class: 'page-body',
      placeholder: 'Type your text here',
      disabled: null
    }
    
    $scope.bodystuff = 'test'
    $scope.lines = [];
    
    var count = 50;
    for(i=0; i < count; i++){
      $scope.bodystuff += " This is something interesting. "
      $scope.lines.push("i");
    }
    console.log($scope.lines.length);
  }]);

angular.module('myApp.directives', [])
  .directive('paper', function() {
    return {
      restrict: 'E',
      replace: true,
      scope:{
        headerLeft: '=',
        headerRight: '=',
        body: '='
      },
      template: '',
      link: function(scope, element, attrs){
        // TODO - Figure out how to use a template url from an inline template on CodePen
      }
    }
  });

Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
  2. https://fonts.googleapis.com/css?family=Indie+Flower
  3. https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js