Angular Material で split bar を実現する

AngularMaterialは標準でスプリットバーを装備していない（2016年4月現在）

flexの数字は動的に変えられるが、5きざみまたは33,35,66,67しか受け付けない。

まずバー部分のHTML
<div layout width="6px" style="cursor:e-resize;" ng-mousedown="split_down($event)" draggable="false"

あとlayoutのところ
<div layout="column" flex="{{left_width}}"
<div layout="column" flex="{{right_width}}"

JavaScript部分

$scope.downX = -1;

$scope.left_width = 50;
$scope.right_width = 50;

$scope.split_down = function($event){

    $scope.downX = $event.screenX;
    $scope.downLeftWidth = $scope.left_width;
    $scope.scaleX = $event.clientX / $scope.left_width;

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

$scope.split_up = function($event) {
    $document.unbind('mousemove', $scope.split_move);
    $document.unbind('mouseup', $scope.split_up);   

    $scope.downX = -1;
};

$scope.split_move = function($event) {

    if( $scope.downX >= 0){
        var value = parseInt($scope.downLeftWidth + ((  $event.screenX - $scope.downX ) / $scope.scaleX ));
        if( value != $scope.left_width && value % 5 == 0  && value >= 0 && value <= 100){
            $scope.left_width = value;
            $scope.right_width = 100 - value;
            $scope.$apply();
        }
    }
};