Bootstrap dynamic divider for columns (angular solution preferable)

Question

Let's say I have a typical bootstrap layout with row's and col-lg-x's

<div class="content container">
    <div class="row">
        <div class="col-lg-5">

        </div>
        <div class="col-lg-7">

        </div>
    </div> 
</div>

Are there any plugins (perferably angular but others too) to make a draggable divider between 2 columns to allows the user to adjust the width?

Like in this example (Tab #2) except it should "snap" to bootstrap's possible col-lg-xx combinations like col-6/col-6, col-5/col-7, col-4/col-8.

I made this slightly less than perfect one a while ago, but it does most of the work: http://codepen.io/pprice/pen/splkc, it wouldnt take much to turn this into a directive — Phil Price, Mar 08 '14 at 04:27
thanks Phil but not quite what I'm looking for I need it to use standard bootstrap styles like row, col-x, and snap to specific col-x combinations. — parliament, Mar 09 '14 at 00:28
[handsontable](http://handsontable.com/) support both bootstrap tables and column re sizing. I integrated it with angular very quickly - it's very well build and documented. — haki, Mar 12 '14 at 08:32
Thanks haki but Im not looking for a table plugin. I looked at the plugin but it's too overkill for what I'm trying to do, it'll end up like hack job for several reasons. I literally have a single divider on the page it would be crazy to make the entire site a table with 2 columns, plus it wont snap. Thanks though :) — parliament, Mar 12 '14 at 16:19
Did you find a solution for this that worked for you? I am looking to do something similar. — Tammy, Aug 18 '14 at 17:45

score 6 · Accepted Answer · answered Mar 15 '14 at 12:26

The following does not address your question directly, in that it does not follow bootstrap's columns/rows. But it might give you a good starting point and others might find it useful:

bg-splitter https://github.com/blackgate/bg-splitter

ui-layout https://github.com/angular-ui/ui-layout