Angular Material で split bar を実現する

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

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

まずバー部分のHTML

あとlayoutのところ

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();
        }
    }
};