jQuery Draggable and Droppable with angularJS

Question

What I am trying to do :

http://jsfiddle.net/nt5dM/1/

<div class="row-fluid">
        <div class="span12">
            <div class="row-fluid" ng-repeat="rows in board">
                <div class="span1 ui-widget-header droppable" ng-repeat="cell in rows" style="border:1px solid black; padding:0; margin:0;">
                    <div style="background-color:white; " ng-show="cell.char=='empty'"></div>
                            <div style="background-color:green; " ng-show="cell.char=='O'"></div>
                            <div style="background-color:white; " ng-show="cell.char=='X'"></div>
                </div>
            </div>

        </div>
    </div>

Above fiddle takes in an input of board size say 3. Which creates a 3x3 Divs All the Divs have class droppable and there is one button which is draggable. Upon dropping the draggable element, I want to identify cell was it dropped on.

My Problem :

For a single div it works : Fiddle 2

<div class="row-fluid">
        <div class="span12 ui-widget-header droppable">
            <div class="row-fluid" ng-repeat="rows in board">
                <div class="span1" ng-repeat="cell in rows" style="border:1px solid black; padding:0; margin:0;">
                    <div style="background-color:white; " ng-show="cell.char=='empty'"></div>
                    <div style="background-color:green; " ng-show="cell.char=='O'"></div>
                    <div style="background-color:white; " ng-show="cell.char=='X'"></div>
                </div>
            </div>
        </div>
    </div>