Drag and drop functionality not working angular js

Ok there was some mistakes in your application:

1) You did not reference the angular-ui directive so the sortable wasn't even available.

<script data-require="angular-ui" data-semver="0.4.0" src="http://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>

2) You did not initialize the ui as a directive on your app:

var app =angular.module('dragapp',['ngRoute', 'ui']);

3) You initialized the sortable on the wrong element. You attached the tag to the table element which makes the tbody elements sortable. Instead you should attach it to the tbody to make the tr tags sortable.

<tbody ui:sortable="sortableOptions">

4) I added some sortable options to your controller to make the glyphicon the drag handle and to show you the stop event after dropping.

$scope.sortableOptions = {
      handle: '.glyphicon-plus',
      stop: function(){
         alert('stopped dragging');
      }
}

And a working plunkr of it all together: Plunkr demo

hello its ok in my example below

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="CategoryManagement.aspx.cs" Inherits="HaselOne.CategoryManagement" %>

<asp:Content ID="Content1" ContentPlaceHolderID="startup_scripts" runat="server">
    <link href="../../Content/Css/Misc/TreeViewFix.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="container" ng-controller="CategoryManagementController">
        <script type="text/ng-template" id="nodes_renderer.html">
                 <div ui-tree-handle class="tree-node tree-node-content">
                    <a class="btn btn-success btn-xs" ng-if="item.Categories && item.Categories.length > 0" data-nodrag ng-click="toggle(this)"><span
                         class="fa"
                         ng-class="{
                                 'fa-chevron-right': collapsed,
                                 'fa-chevron-down': !collapsed
                                   }"></span></a>
                        {{item.CategoryName}}
                  </div>
                <ol ui-tree-nodes="" ng-model="item.Categories" ng-class="{hidden: collapsed}">
                    <li ng-repeat="item in item.Categories" ui-tree-node ng-include="'nodes_renderer.html'">
                    </li>
                 </ol>
        </script>
        <div class="row">
            <div class="input-group" style="left: 25px;">
                <div class="input-group-btn">
                    <a class="btn btn-success" ng-click="expandAll()">Expand all</a>
                    <a class="btn btn-warning" ng-click="collapseAll()">Collapse all</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-12">
                <div ui-tree="treeOptions">
                    <ol ui-tree-nodes ng-model="list">
                        <li ng-repeat="item in list" ui-tree-node ng-include="'nodes_renderer.html'"></li>
                    </ol>
                </div>
            </div>

            <div class="input-group col-md-3 col-sm-4 col-xs-12">
                <br />
                <div class="row">
                    <label><b>Ana Kategori</b></label>
                    <input class="form-control hero" type="text" id="txtSelectedCategyName" ng-value="selectedCategoryName" ng-attr-title="{{selectedCategoryId}}" runat="server" placeholder="Seçilen Kategori" />
                </div>
                <br />
                <div class="row">
                    <label><b>Yeni Eklenecek Kategori Adı</b></label>
                    <input class="form-control hero" type="text" id="txtCategoryName" ng-model="NewCategoryName" runat="server" placeholder="Kategori Yazınız" />
                </div>
                <br />
                <div class="row">
                    <div class="input-group-btn">
                        <a class="btn btn-info" ng-click="Add()">Yeni Kategori Ekle</a>
                        <a class="btn btn-danger" ng-click="Delete()">Seçilen Kategoriyi Sil</a>
                        <a class="btn btn-warning" ng-click="Reload()">Yenile</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="scriptbase" runat="server">
    <script src="/Scripts/_Controllers/CategoryManagementController.js"></script>
</asp:Content>

and its angular controller

HaselApp.controller('CategoryManagementController', ['$scope', '$http', '$timeout', "$q", function ($scope, $http, $timeout, $q) {
    $scope.GetCategories = function (success, error) {
        $http.post('/CategoryManagement/GetCategoriesAll').then(
    function (response) {
        if (response.data.IsSuccess)
            $scope.list = response.data.Data;
    }
    , function error(e) { console.log("GetCategoriesAll error", e) });
    }
    $scope.GetCategories();
    $scope.toggle = function (scope) {
        scope.toggle();
    };
    $scope.collapseAll = function () {
        $scope.$broadcast('angular-ui-tree:collapse-all');
    };

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

    $scope.UpdateCategory = function (sourceId, destId) {
        $http.post('/CategoryManagement/SetCategoryByNodeId', { source: sourceId, dest: destId }).then(
        function (response) {
            $timeout(function () {
                $scope.collapseAll();
            }, 200);
        }
        , function error(e) { console.log("SetCategoryByNodeId error", e) });
        console.log("source/dest", sourceId, destId);
    }

    $scope.Add = function () {
        $http.post('/CategoryManagement/AddNewCategory', { newCategoryName: $scope.NewCategoryName, parentId: $scope.selectedCategoryId }).then(
        function (response) {
            $scope.GetCategories();
            $timeout(function () {
                $scope.collapseAll();
            }, 200);
        }
        , function error(e) { console.log("AddNewCategory error", e) });
        console.log("catName/parentId", $scope.NewCategoryName, $scope.selectedCategoryId);
    }
    $scope.NewCategoryName = '';

    $scope.Delete = function () {
        var deferred = $q.defer();
        $scope.AlertService.Confirm("\"" + $scope.selectedCategoryName + "\" kategorisini silmek istediğinizden eminmisiniz (!Dikkat bu değişiklik geri alınamaz)?", "", function (result) {
            if (result) {

                $http.post('/CategoryManagement/DeleteCategory', { desCategoryId: $scope.selectedCategoryId }).then(
                function (response) {
                    $scope.GetCategories();
                    $timeout(function () {
                        $scope.collapseAll();
                    }, 200);
                }
                , function error(e) { console.log("DeleteCategory error", e) });
                console.log("desCategoryId", $scope.selectedCategoryId);

            }
            deferred.resolve(result);
        });
        return deferred.promise;
    }

    $scope.Reload = function ReloadCategories() {
        $scope.GetCategories();
        $timeout(function () {
            $scope.collapseAll();
        }, 200);
    }

    $scope.treeOptions = {
        beforeDrop: function (e) {
            $scope.selectedCategoryName = e.source.nodeScope.$modelValue.CategoryName;
            $scope.selectedCategoryId = e.source.nodeScope.$modelValue.Id;
            var sourceId = 0;
            var destId = 0;
            if (typeof e.source !== 'undefined'
                    && typeof e.dest !== 'undefined'
                    && typeof e.source.nodeScope !== 'undefined'
                    && typeof e.dest.nodesScope !== 'undefined'
                    && typeof e.source.nodeScope.$modelValue !== 'undefined'
                    && typeof e.dest.nodesScope.item !== 'undefined') {
                sourceId = e.source.nodeScope.$modelValue.Id;
                destId = e.dest.nodesScope.item.Id;
            }
            if (sourceId != destId && typeof e.dest.nodesScope.item.Id != 'undefined' && e.source.nodeScope.$modelValue.ParentId != e.dest.nodesScope.item.Id) {
                var deferred = $q.defer();
                $scope.AlertService.Confirm("Hiyerarşiyi değiştirmek istediğinize emin misiniz?", "", function (result) {
                    if (result) {
                        $scope.UpdateCategory(sourceId, destId);
                    }
                    deferred.resolve(result);
                });
                return deferred.promise;
            }
            else {
                return false;
            }
        }
    };
    $timeout(function () {
        $scope.collapseAll();
    }, 200);
}]);