Edit in JSFiddle

angular.module('TNSApp', ['ngDraggable'])
  .controller('controller', function($scope) {

    $scope.listItems = [{
      name: "some name",
      title: "title1"
    }, {
      name: "some name2",
      title: "title2"
    }, {
      name: "some name3",
      title: "title3"
    }, ];

    $scope.droppedObjects = [];
    $scope.input = {};
  
    // drag complete over drop area
    $scope.onDragComplete = function(data, evt) {
      console.log("drag success, data:", data);
      var index = $scope.droppedObjects.indexOf(data);
      if (index > -1) {
        $scope.droppedObjects.splice(index, 1);
      }
    }
    
    // drop complete over drop area
    $scope.onDropComplete = function(data, evt) {
      console.log("drop success, data:", data);
      var index = $scope.droppedObjects.indexOf(data);
      if (index == -1)
        $scope.droppedObjects.push(data);
    }
    
    // drop complete over input box
    $scope.onDropCompleteInput = function(data, evt) {
      console.log("drop on input success, data:", data);
      $scope.input = data;
    }
    
    // drop complete over items area (remove from dropped list)
    $scope.onDropCompleteRemove = function(data, evt) {
      console.log("drop success - remove, data:", data);
      var index = $scope.droppedObjects.indexOf(data);
      if (index != -1)
        $scope.droppedObjects.splice(index);
    }
    
    // other draggable events handlers

    var onDraggableEvent = function(evt, data) {
      console.log("128", "onDraggableEvent", evt, data);
    }
    $scope.$on('draggable:start', onDraggableEvent);
    //$scope.$on('draggable:move', onDraggableEvent);
    $scope.$on('draggable:end', onDraggableEvent);
  
  });
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

[ng-drag] {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.item {
  width: 100px;
  height: 60px;
  background: rgba(255, 0, 0, 0.5);
  color: white;
  text-align: center;
  padding-top: 5%;
  display: inline-block;
  margin: 0 10px;
  cursor: move;
}

ul.draggable-objects:after {
  display: block;
  content: "";
  clear: both;
}

.draggable-objects li {
  float: left;
  display: block;
  width: 120px;
  height: 100px;
}

[ng-drag].drag-over {
  border: solid 1px red;
}

[ng-drag].dragging {
  opacity: 0.5;
}

.drop-container {
  background: rgba(0, 255, 0, 0.5);
  text-align: center;
  width: 600px;
  height: 200px;
  padding-top: 90px;
  display: block;
  margin: 20px auto;
  position: relative;
}

.drop-input {
  width: 200px;
  height: 40px;
}

.drag-enter {
  border: solid 5px red;
}

.drop-container span.title {
  display: block;
  position: absolute;
  top: 10%;
  left: 50%;
  width: 200px;
  height: 20px;
  margin-left: -100px;
  margin-top: -10px;
}

.drop-container div {
  position: relative;
  z-index: 2;
}
<div ng-controller="controller">

    <div class="row">
      <h1>ngDraggable Example</h1>
    </div>

    <div ng-drop="true" ng-drop-success="onDropCompleteRemove($data,$event)">
      <ul class="draggable-objects">
        <li ng-repeat="obj in listItems">
          <div ng-drag="true" ng-drag-data="obj" data-allow-transform="true" class="item"> {{obj.title}} </div>
        </li>
      </ul>
    </div>

    <hr/>
    <div ng-drop="true" ng-drop-success="onDropComplete($data,$event)" class="drop-container">
      <span class="title">Drop area</span>

      <div ng-repeat="obj in droppedObjects" ng-drag="true" ng-drag-data="obj" ng-drag-success="onDragComplete($data,$event)" class="item">
        {{obj.title}}
      </div>
    </div>

    <hr/>
    <div class="container">
      Drop on input:
      <input ng-model="input.name" class="drop-input" ng-drop="true" ng-drop-success="onDropCompleteInput($data,$event)">
    </div>

    <br>
    <hr/>
    <pre>listItems = {{listItems|json}}</pre>
    <pre>input = {{input|json}}</pre>
    <pre>droppedObjects = {{droppedObjects|json}}</pre>
  </div>