AngularJS - Not getting anything in html page while using angularjs drag and drop list library

I want to implement drag and drop feature in my project. For this, i'm using angular-drag-and-drop-lists and here is the demo of that feature. I'm not getting anything the html page. I tried to get the list on without the related CSS and it worked fine (commented that chunk of code).

Can anyone provide solution for this issue, why i'm not getting anything on the html without having any error on the console.

HTML:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

        <script src="./script.js"></script>
        <script src="./angular-drag-and-drop-lists.js"></script>
        <title>Document</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body ng-app="demo">
        <div ng-controller="SimpleDemoController" class="simpleDemo">
            <ul dnd-list="list">
                <li ng-repeat="item in list" dnd-draggable="item"
                    dnd-moved="list.splice($index, 1)"
                    dnd-effect-allowed="move"
                    dnd-selected="models.selected = item"
                    ng-class="{'selected': models.selected === item}">
                    {{item.label}}
                </li>
            </ul>
            <!-- <ul ng-repeat="item in models.lists.A">
                <li>{{item.label}}</li>
            </ul> -->


        </div>
    </body>
</html>

Javascript

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

var SimpleDemoController = function($scope) {

    $scope.models = {
        selected: null,
        lists: {"A": [], "B": []}
    };
    console.log($scope.models.lists.A, $scope.models.lists.B);
    // Generate initial model
    for (var i = 1; i <= 3; ++i) {
        $scope.models.lists.A.push({label: "Item A" + i});
        $scope.models.lists.B.push({label: "Item B" + i});
    }

    // Model to JSON for demo purpose
    $scope.$watch('models', function(model) {
        $scope.modelAsJson = angular.toJson(model, true);
    }, true);

};

demo.controller('SimpleDemoController', SimpleDemoController);

css

.simpleDemo ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}
.simpleDemo ul[dnd-list] .dndDraggingSource {
    display: none;
}
.simpleDemo ul[dnd-list] .dndPlaceholder {
    background-color: #ddd;
    display: block;
    min-height: 42px;
}

.simpleDemo ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
}
.simpleDemo ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}