Angular gridster issues- resize and duplicate grids - angularjs

Question

I am trying to use angular gridster to have charts inside them. Below is the code which I am using. First thing is it doesnt allow me to move or resize any of these grids. Second its making each chart inside the grid repeat 4 times . Can anyone let me know what I could be doing wrong with the html or the configuration for gridster. I have referenced the css and js files for it correctly.
$scope.standardItems = [{
size: {
x: 2,
y: 2
},
position: [0, 0]
},
{
size: {
x: 2,
y: 2
},
position: [2, 0]
},
{
size: {
x: 2,
y: 3
},
position: [0, 2]
},
{
size: {
x: 1,
y: 1
},
position: [4, 2]
}
];
$scope.gridsterOpts = {
minRows: 2, // the minimum height of the grid, in rows
maxRows: 5,
columns: 1, // the width of the grid, in columns
colWidth: 'auto', // can be an integer or 'auto'. 'auto' uses the pixel width of the element divided by 'columns'
rowHeight: 'match', // can be an integer or 'match'. Match uses the colWidth, giving you square widgets.
margins: [10, 10], // the pixel distance between each widget
defaultSizeX: 2, // the default width of a gridster item, if not specifed
defaultSizeY: 1, // the default height of a gridster item, if not specified
minSizeX: 1, // minimum column width of an item
maxSizeX: null, // maximum column width of an item
minSizeY: 1, // minumum row height of an item
maxSizeY: null, // maximum row height of an item
isMobile: true, // stacks the grid items if true
mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
resizable: {
enabled: true,
start: function(event, uiWidget, $element) {}, // optional callback fired when resize is started,
resize: function(event, uiWidget, $element) {}, // optional callback fired when item is resized,
stop: function(event, uiWidget, $element) {} // optional callback fired when item is finished resizing
},
draggable: {
enabled: true, // whether dragging items is supported
handle: 'h5', // optional selector for resize handle
start: function(event, uiWidget, $element) {}, // optional callback fired when drag is started,
drag: function(event, uiWidget, $element) {}, // optional callback fired when item is moved,
stop: function(event, uiWidget, $element) {} // optional callback fired when item is finished dragging
}
};
<div gridster="gridsterOpts">
<ul>
<li style="border: solid 1px;" gridster-item="item" ng-repeat="item in standardItems">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h5>{{charts.data.chartsName[$parent.$index]}}</h5>
</div>
<div class="field-container" style="margin-top: 10px;">
<select class="form-control col-md-4" ng-change="charts.hasChanged[arrKey]" ng-model="charts.type[arrKey]" ng-init="charts.type[arrKey] = charts.data.chartsDefault[$parent.$index]">
<option ng-repeat="chartsTypeValue in charts.data.chartsType[arrKey] " >{{chartsTypeValue}}</option>
</select>
<!-- <label class="floating-label">Chart Type</label> -->
</div>
</div>
</div>
<div class="svg-container" ng-if="charts.type[arrKey] =='Bar'" style="width: 400px; height: 250px;">
<bars-chart ng-if="arrValue" chart-data="arrValue" />
</div>
<div class="svg-container " ng-if="charts.type[arrKey] =='Pie'" style="text-align: -webkit-center; width: 400px; height: 220px; ">
<donut-Chart ng-if="arrValue" chart-data="arrValue">
</donut-chart>
</div>
<div class="svg-container " ng-if="charts.type[arrKey]=='Line'" style="width: 400px; height: 220px; ">
<line-Chart ng-if="arrValue" chart-data="arrValue">
</line-chart>
</div>
<hr>
</li>
</ul>
</div>
</div>