App layout

HTML

<body ng-app="app" ng-controller="AppController">
    <div class="row header">HEADER</div>
    <div class="row body">
        <div class="left col vscroll">
            <ul>
                <li ng-repeat="item in data">
                    {{ item }}
                </li>
            </ul>
        </div>
        <div class="right col vscroll">
            Form
        </div>
    </div>
    <div class="row footer">FOOTER</div>
</body>

CSS

body {
  
 }
 .row, .col {
     overflow: hidden;
     position: absolute;
     border: dotted 1px red;
 }
 .left {
     width: 30%;
 }
 .right {
     left: 30%;
     right: 0px;
 }
 .row {
     left: 0;
     right: 0;
 }
 .col {
     top: 0;
     bottom: 0;
 }
 .vscroll {
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 }
 .body.row {
     top: 40px;
     bottom: 40px;
 }
 .footer.row {
     bottom: 0;
     height: 40px;
 }

JavaScript

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

app.controller('AppController', function ($scope) {
    $scope.data = [];
   
    for (var i = 0; i < 100; i++) {
        $scope.data.push("List element " + i);
    }
});