Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
<div ng-controller="MailBld">
		<h2>Choose block from here</h2>
		<ul>
		    <li ng-repeat="layout in layoutlist">
		    	<a href="" ng-click="add_layout(layout)">{{layout.fullname}}</a>
		    </li>
		</ul>
        <br>
		<h2>Template</h2>
		<ul class="chosen" dnd-list="model">
		    <li ng-repeat="chosen in chosenlist track by $index" ng-animate=" 'animate' ">
		    	{{chosen.fullname}} <a href="" ng-click="del_chosen($index)">remove block</a>
		    </li>
		</ul>
	</div>

CSS

.chosen {
	li {
		padding: 5px;
		border: 1px solid black;
		background: #ccc;
	}
}

/* Animation */
.animate-enter, 
.animate-leave
{ 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 
 
.animate-enter.animate-enter-active, 
.animate-leave {
    opacity: 1;
    left: 0;
}
 
.animate-leave.animate-leave-active,
.animate-enter {
    opacity: 0;
    left: -50px;
}

JavaScript

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

function MailBld($scope) {
	$scope.chosenlist = [];

	$scope.layoutlist = [
		{ name: 'layout1', fullname: 'Layout 1' },
		{ name: 'layout2', fullname: 'Layout 2' },
		{ name: 'layout3', fullname: 'Layout 3' }
	];

	$scope.add_layout = function(new_layout) {
		$scope.chosenlist.push(new_layout);
	};

	$scope.del_chosen = function(chosen_i) {
  		$scope.chosenlist.splice(chosen_i,1);
	}
}