Am building a list of widgets with JSPlumb and AngularJS, i need to enable resize using the handler on each widget. There is an [`example`](http://www.freedevelopertutorials.com/jsplumb-tutorial/examples/jsplumb-fully-draggable-resizable-elements-example/) already on it, i have implemented , but resize does not happen.
here is my code,

**HTML:**

```
<div ng-controller="CustomWidgetCtrl"  plumb-item class="item"  resizeable>

```

**App.js:**

```
routerApp.directive('resizeable',function($compile){
return{
    restrict: 'A',
   link: function(scope, element, attrs){
         element.resizeable({
        resize : function(event, ui) {            
                jsPlumb.repaint(ui.helper);
            },
            handles: "all"
        });
    }
};

```

Here is the [`Plunker`](http://plnkr.co/edit/wcTa47xMkIMz6FZEZ6sN) 

Output after implementing pankajparkar's code,

![enter image description here](https://i.stack.imgur.com/D7qxT.png)

**My actual widget:**

```
<div    ng-controller="CustomWidgetCtrl"  plumb-item class="item"    style="margin: 20px; top: 50px; left: 110px; height: 480px; width: 400px; " ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }" data-identifier="{{widget.id}}" resizeable   >

```