Unable to clone demo - Githubissues

I create a clone of this demo https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html#/dashboard

Now my widgets stretched to the full width and they don't have drag or resize properties. I don't have errors in the browser dev console.

dash What do I miss here?

Lib versions:

    "angular": "^1.5.11",
    "angular-gridster": "^0.13.14",
    "angular-ui-bootstrap": "^0.12.1",
    "bootstrap": "^3.3.7"

My app structure:

d- app
 - app.js
 d- templates
  - widget_settings.html
d- style
 - style.css
- index.html

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Angular Dashboard App</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="node_modules/angular-gridster/dist/angular-gridster.min.css" />
  <link rel="stylesheet" href="style/style.css" />
</head>

 <script src="node_modules/angular/angular.min.js"></script>
 <script src="node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.min.js"></script>
 <script src="node_modules/angular-gridster/dist/angular-gridster.min.js"></script>

  <body>
    <div ng-app="dashboardApp" ng-controller="DashboardCtrl">
      <h1>{{greet}}</h1>
      <div class="page-header">
        <a class="pull-right btn btn-primary" ng-click="addWidget()"><i class="glyphicon glyphicon-plus"></i> Add Widget</a>
        <a class="pull-right btn btn-warning" ng-click="clear()"><i class="glyphicon glyphicon-trash"></i> Clear</a>
        <h1 style="display: inline-block; width: 200px;">Dashboard</h1>
        <select class="form-control" style="width: 150px; margin-bottom: 20px; display:inline-block;" ng-change="changeDashboard()" ng-model="selectedDashboardId" ng-options="d.id as d.name for d in dashboards | object2Array | orderBy:'id'">
        </select>

      </div>
      <div gridster="gridsterOptions">
        <ul>
            <li gridster-item="widget" ng-repeat="widget in dashboard.widgets">
                <div class="box" ng-controller="CustomWidgetCtrl">
                    <div class="box-header">
                        <h3>{{ widget.name }}</h3>
                        <div class="box-header-btns pull-right">
                            <a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
                            <a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
                        </div>
                    </div>
                    <div class="box-content">
                    </div>
                </div>
            </li>
        </ul>
      </div>

    </div>

    <script src="app/app.js"></script>

  </body>
</html>

app/app.js

var app = angular.module('dashboardApp', ['ui.bootstrap']);

app.controller('DashboardCtrl', ['$scope', '$timeout',
    function($scope, $timeout) {

        $scope.gridsterOptions = {
            margins: [20, 20],
            columns: 4,
            draggable: {
                handle: 'h3'
            }
        };

        $scope.dashboards = {
            '1': {
                id: '1',
                name: 'Home',
                widgets: [{
                    col: 0,
                    row: 0,
                    sizeY: 1,
                    sizeX: 1,
                    name: "Widget 1"
                }, {
                    col: 2,
                    row: 1,
                    sizeY: 1,
                    sizeX: 1,
                    name: "Widget 2"
                }]
            },
            '2': {
                id: '2',
                name: 'Other',
                widgets: [{
                    col: 1,
                    row: 1,
                    sizeY: 1,
                    sizeX: 2,
                    name: "Other Widget 1"
                }, {
                    col: 1,
                    row: 3,
                    sizeY: 1,
                    sizeX: 1,
                    name: "Other Widget 2"
                }]
            }
        };

        $scope.clear = function() {
            $scope.dashboard.widgets = [];
        };

        $scope.addWidget = function() {
            $scope.dashboard.widgets.push({
                name: "New Widget",
                sizeX: 1,
                sizeY: 1
            });
        };

        $scope.$watch('selectedDashboardId', function(newVal, oldVal) {
            if (newVal !== oldVal) {
                $scope.dashboard = $scope.dashboards[newVal];
            } else {
                $scope.dashboard = $scope.dashboards[1];
            }
        });

        // init dashboard
        $scope.selectedDashboardId = '1';

    }
]);

app.controller('CustomWidgetCtrl', ['$scope', '$modal',
    function($scope, $modal) {

        $scope.remove = function(widget) {
            $scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
        };

        $scope.openSettings = function(widget) {
            $modal.open({
                scope: $scope,
                templateUrl: 'templates/widget_settings.html',
                controller: 'WidgetSettingsCtrl',
                resolve: {
                    widget: function() {
                        return widget;
                    }
                }
            });
        };

    }
]);

app.controller('WidgetSettingsCtrl', ['$scope', '$timeout', '$rootScope', '$modalInstance', 'widget',
    function($scope, $timeout, $rootScope, $modalInstance, widget) {
        $scope.widget = widget;

        $scope.form = {
            name: widget.name,
            sizeX: widget.sizeX,
            sizeY: widget.sizeY,
            col: widget.col,
            row: widget.row
        };

        $scope.sizeOptions = [{
            id: '1',
            name: '1'
        }, {
            id: '2',
            name: '2'
        }, {
            id: '3',
            name: '3'
        }, {
            id: '4',
            name: '4'
        }];

        $scope.dismiss = function() {
            $modalInstance.dismiss();
        };

        $scope.remove = function() {
            $scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1);
            $modalInstance.close();
        };

        $scope.submit = function() {
            angular.extend(widget, $scope.form);

            $modalInstance.close(widget);
        };

    }
]);

// helper code
app.filter('object2Array', function() {
    return function(input) {
        var out = [];
        for (i in input) {
            out.push(input[i]);
        }
        return out;
    }
});

style/style.css

.controls {
    margin-bottom: 20px;
}
.page-header {
    margin-top: 20px;
}
ul {
    list-style: none;
}
.box {
    height: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
}
.box-header {
    background-color: #eee;
    padding: 0 30px 0 10px;
    border-bottom: 1px solid #ccc;
    cursor: move;
    position: relative;
}
.box-header h3 {
    margin-top: 10px;
    display: inline-block;
}
.box-content {
    padding: 10px;
}
.box-header-btns {
    top: 15px;
    right: 10px;
    cursor: pointer;
    position: absolute;
}
a {
    color: #ccc;
}
form {
    margin-bottom: 0;
}
.gridster {
    border: 1px solid #ccc;
}

ManifestWebDesign / angular-gridster

Unable to clone demo #491