AngularJS 1.2.x

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

app.controller('MainCtrl', function($scope) {
  $scope.content = 'Hello World';
});

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
    <script data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js" data-require="angular.js@1.2.x"></script>
    <script src="app.js"></script>
    <script src="resizer.js"></script>
  </head>

  <body ng-controller="MainCtrl">

  	<div id="topnav">Top navbar</div>
  
  	<div id="sidebar">
  		<h3>Side navbar</h3>
  	</div>
  
  	<div id="content">

  		<div id="top-content">Top content <p>{{content}}</p></div>
  
  		<div id="bottom-content">Bottom content</div>
  
  		<div id="content-resizer" 
  			resizer="horizontal" 
  			resizer-height="6" 
  			resizer-top="#top-content" 
  			resizer-bottom="#bottom-content">
  		</div>
  
  	</div>
  
  	<div id="sidebar-resizer" 
  		resizer="vertical" 
  		resizer-width="6" 
  		resizer-left="#sidebar" 
  		resizer-right="#content"
  		resizer-max="400">
  	</div>
  	
  </body>

</html>

#topnav {
    background-color: #333333;
    display: block;
    height: 35px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #DDD;
}

#sidebar {
	background-color: #EEE;
    position: absolute;
    top: 35px;
    bottom: 0;
    left: 0;
    width: 200px;
    overflow: auto;
}
#content {
    position: absolute;
    top: 35px;
    bottom: 0;
    left: 206px /* 200 + 6*/;
    right: 0;
    overflow: hidden;
    color: #FFF;
    
}
#top-content {
    position: absolute;
    top: 0;
    bottom: 136px; /* 130 + 6 */
    left: 0;
    right: 0;
    background-color: #444;
    overflow: auto;
}
#bottom-content {
    position: absolute;
    height: 130px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
    background-color: #777;
}

#sidebar-resizer {
	background-color: #666;
    position: absolute;
    top: 35px;
    bottom: 0;
    left: 200px;
    width: 6px;
    cursor: e-resize;
}
#content-resizer {
    position: absolute;
    height: 6px;
    bottom: 130px;
    left: 0;
    right: 0;
    background-color: #666;
    cursor: n-resize;
}

#sidebar-resizer:hover, #preview-resizer:hover {
	background-color: #AAA;
}

angular.module('mc.resizer', []).directive('resizer', function($document) {

	return function($scope, $element, $attrs) {

		$element.on('mousedown', function(event) {
			event.preventDefault();

			$document.on('mousemove', mousemove);
			$document.on('mouseup', mouseup);
		});

		function mousemove(event) {

			if ($attrs.resizer == 'vertical') {
				// Handle vertical resizer
				var x = event.pageX;

				if ($attrs.resizerMax && x > $attrs.resizerMax) {
					x = parseInt($attrs.resizerMax);
				}

				$element.css({
					left: x + 'px'
				});

				$($attrs.resizerLeft).css({
					width: x + 'px'
				});
				$($attrs.resizerRight).css({
					left: (x + parseInt($attrs.resizerWidth)) + 'px'
				});

			} else {
				// Handle horizontal resizer
				var y = window.innerHeight - event.pageY;

				$element.css({
					bottom: y + 'px'
				});

				$($attrs.resizerTop).css({
					bottom: (y + parseInt($attrs.resizerHeight)) + 'px'
				});
				$($attrs.resizerBottom).css({
					height: y + 'px'
				});
			}
		}

		function mouseup() {
			$document.unbind('mousemove', mousemove);
			$document.unbind('mouseup', mouseup);
		}
	};
});