Shapeshift Simple in AngularJS

HTML

<script src="http://mcpants.github.io/jquery.shapeshift/core/jquery.shapeshift.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div ng-app="myapp" ng-controller="myCtrl">
    {{tiles}}
    <div class="container" shapeshift="{maxColumns: 3}">
        <div ng-repeat="tile in tiles">{{tile}}</div>
    </div>
        <button type="button" class="btn btn-default" ng-click='a()'>Default</button>

</div>

CSS

.container {
    border: 1px dashed #ccc;
    position: relative;
}

.container > div {
    background: #CCC;
    height: 100px;
    position: absolute;
    width: 80px;
}

.container > div[data-ss-colspan='2'] { width: 170px; }

.container .ss-placeholder-child {
    background: transparent;
    border: 1px dashed red;
}

JavaScript

var app = angular.module('myapp', []);

app.directive('shapeshift', function(){
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
              $(element).shapeshift(scope.$eval(attrs.shapeshift));
              
              element.on('ss-rearranged', function (e, selected) {
                console.log(selected);
              });
          }
        };
    }
);

app.controller('myCtrl', function($scope) {
    $scope.tiles = [1,2,3,4];
    $scope.a = function(){
    	$scope.tiles.push($scope.tiles.length + 1);
setTimeout(function(){$(".container").shapeshift({colWidth:80});console.log('aa')},10);
    }
});

setTimeout(function(){$(".container").shapeshift({colWidth:80});console.log('aa')},10);