angular
            .module('taskManager')
            .controller('DragListController', DragListController);

        DragListController.$inject = ['$scope', '$element', 'dragularService'];
        function DragListController($scope, $element, dragularService){

            var vm = this;
            vm.items = {};

            vm.todoList = [];
            vm.inProgList = [];
            vm.completedList = [];

            $scope.items = [];

            vm.init = function($element) {

                var database = firebase.database();
                database.ref('/task').once('value').then(function(snapshot) {

                    $scope.$apply(function(){

                        vm.items = snapshot.val();
                        //Manipulating data from Firebase
                        angular.forEach(vm.items, function(value) {
                            angular.forEach(value, function(data){
                                if(data == 'completed'){
                                    vm.completedList.push(value);
                                }
                                if(data == 'to-do'){

                                    vm.todoList.push(value);
                                }
                                if(data == 'on the process'){
                                    vm.inProgList.push(value);
                                }
                            });
                        });

                        dragularService($element.children().eq(0).children(), {containersModel: vm.todoList});


                    });

                });


            }/*End of init function*/


            vm.init($element);

        }

angular.module('taskManager', [
    'dragularModule',
    'ngRoute',
    'googlechart'
]);