Drag and drop using angular-ui-tree

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>

  <link data-require="angular-ui-tree@*" data-semver="2.8.0" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.min.css" />
  <script data-require="angular-ui-tree@*" data-semver="2.8.0" src="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.js"></script>


  <script src="example.js"></script>
</head>

<body>
  <div ng-controller="PaginationDemoCtrl">
    <!-- Nested node template -->
    <h3>Basic Example</h3>
    <button ng-click="expandAll()">Expand all</button>
    <button ng-click="collapseAll()">Collapse all</button>

    <div ui-tree id="tree-root">
      <ol ui-tree-nodes ng-model="data">
        <li ng-repeat="node in data" ui-tree-node>
          {{node.title}}
        </li>
      </ol>
          <ol ui-tree-nodes ng-model="row.columns">
            <li ng-repeat="column in row.columns" ui-tree-node>
              <div ui-tree-handle>
                {{column.name}}
              </div>
            </li>
          </ol>    </div>
  </div>
</body>

</html>

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ui.tree']);
angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl', function($scope, $log)  {
      $scope.remove = function (scope) {
        scope.remove();
      };

      $scope.toggle = function (scope) {
        scope.toggle();
      };

      $scope.moveLastToTheBeginning = function () {
        var a = $scope.data.pop();
        $scope.data.splice(0, 0, a);
      };

      $scope.newSubItem = function (scope) {
        var nodeData = scope.$modelValue;
        nodeData.nodes.push({
          id: nodeData.id * 10 + nodeData.nodes.length,
          title: nodeData.title + '.' + (nodeData.nodes.length + 1),
          nodes: []
        });
      };

      $scope.collapseAll = function () {
        $scope.$broadcast('angular-ui-tree:collapse-all');
      };

      $scope.expandAll = function () {
        $scope.$broadcast('angular-ui-tree:expand-all');
      };

      $scope.data = [{
        'id': 1,
        'title': 'node1',
        'nodes': [
          {
            'id': 11,
            'title': 'node1.1',
            'nodes': [
              {
                'id': 111,
                'title': 'node1.1.1',
                'nodes': []
              }
            ]
          },
          {
            'id': 12,
            'title': 'node1.2',
            'nodes': []
          }
        ]
      }, {
        'id': 2,
        'title': 'node2',
        'nodrop': true, // An arbitrary property to check in custom template for nodrop-enabled
        'nodes': [
          {
            'id': 21,
            'title': 'node2.1',
            'nodes': []
          },
          {
            'id': 22,
            'title': 'node2.2',
            'nodes': []
          }
        ]
      }, {
        'id': 3,
        'title': 'node3',
        'nodes': [
          {
            'id': 31,
            'title': 'node3.1',
            'nodes': []
          }
        ]
      }];
    });