title: Unknown provider: $elementProvider <- $element <- DragListController
body: <p>Here is my code. I got and error Unknown provider: $elementProvider &lt;- $element &lt;- DragListController. I'm still new with anuglar js          </p>
  
  <pre><code>        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);
  
          }
  </code></pre>
  
  <p>Here is my app.js</p>
  
  <pre><code>    angular.module('taskManager', [
      'dragularModule',
      'ngRoute',
      'googlechart'
  ]);
  </code></pre>
  
  <p>Error: [$injector:unpr]<br>
  I'm using luckylooke/dragular for my app. Drag and drop functionality. Please help.</p>
  
  <p>Here is my routes.js</p>
  
  <pre><code>    angular.module('taskManager')
      .config(function($routeProvider) {
  
          $routeProvider
              .when('/task',{
                  templateUrl: 'views/task-view.html',
                  controller: 'TaskListController as taskList',
                  resolve: {
  
                  }
              })
              .when('/',{
                  templateUrl: 'views/task.html',
                  controller: 'TaskListController as taskList'
              })
              .when('/all-list',{
                  templateUrl: 'views/all-list.html',
                  controller: 'TaskListController as taskList'
              })
              .when('/theme3',{
                  templateUrl: 'views/theme3.html',
                  controller: 'DragListController as dragList'
              });
  
      });                                                                                                                   
  </code></pre>