handsontable angularjs -- showing issues with bootstrap css -- simplified css/js

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

  <head>
  
    <meta charset="utf-8" />
    
    <script data-require="angular.js@*" data-semver="1.2.10" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.js"></script>

    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    
    <script src="http://handsontable.github.io/ngHandsontable/bower_components/handsontable/dist/handsontable.full.js"></script>
    <script src="http://handsontable.github.io/ngHandsontable/dist/ngHandsontable.js"></script>

    <link rel="stylesheet" media="screen" href="http://handsontable.github.io/ngHandsontable/bower_components/handsontable/dist/handsontable.full.css" />
    
    <script src="script.js"></script>
  </head>

  <body>

    <div ng-controller="gridController"> 

        <h3> Grid A </h3>
        
        <hot-table
                settings="gridA.settings"
                datarows="gridA.items"
                columns="gridA.columns">
        </hot-table>
        
        <br />
        
        <h3> Grid B: datarows never initialized</h3>
        
        <hot-table
                settings="gridB.settings"
                datarows="gridB.items"
                columns="gridB.columns">
        </hot-table>
        
        <br />
        <br />
        <h3>Initialize datarows in the scope:</h3>
        <button ng-click="initItems()" type="button">Init items in Grids A and B</button>

    </div>
    
     
    
  </body>

</html>

This shows how to databind position of draggable elements. Also illustrates use 
of a "drag handle" that is the only allowed way to drag the object. Also 
demonstrates constraint of draggable elements to their parent container.

(function() {

  angular.module("drag", [
    'ngHandsontable'
  ]).controller("gridController", ["$scope",
    function($scope) {


      var columns = [{
        data: 'a',
        title: 'A'
      }, {
        data: 'b',
        title: 'B'
      }, {
        data: 'c',
        title: 'C'
      }];


      var items = [{
        a: 'A1',
        b: 'B1',
        c: 'C1'
      }, {
        a: 'A2',
        b: 'B2',
        c: 'C2'
      }];


      $scope.gridA = {
        columns: columns,
        items: []
      };
      $scope.gridB = {
        columns: columns,
        items: []
      };

      $scope.gridA.settings = {
        colHeaders: true,
        rowHeaders: true,
        minSpareRows: 1,
        minRows: 1 /* minRows == minSpareRows */
      };

      $scope.gridB.settings = {
        colHeaders: true,
        rowHeaders: true,
        minSpareRows: 1,
        minRows: 10 /* minRows != minSpareRows */
      };


      $scope.initItems = function() {

        $scope.gridA.items = items;
        $scope.gridB.items = items;

      };



    }
  ]);

})()