$injector:unpr error when trying to inject ui-calendar to my controller

I am trying to use ui-calendar in my project. The calendar will have different views based on database value in database pages. As I have to call calendar function multiple times I thought I will put the code in a factory service and call it in different controllers as needed. But when I tried to do that the console is giving:

angular.js:12520 Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=calendarSerProvider%20%3C-alendarSer%20%3C-%20myNgController" error.

Following is my code:

var app = angular.module('myApp', ['ui.calendar', 'ui.router']);
app.controller('myNgController', ['$scope','calendarSer', function ($scope,calendarSer) {

    calendarSer.displayCalendar();


  }]);


  app.factory('calendarSer', ['$scope', '$http','$rootScope', 'uiCalendarConfig', function ($scope, $http,$rootScope, uiCalendarConfig) {

    return{
    displayCalendar : function(){
    $calendar = $('[ui-calendar]');

    var date = new Date(),
      d = date.getDate(),
      m = date.getMonth(),
      y = date.getFullYear();

    $scope.changeView = function(view){      
       $calendar.fullCalendar('changeView',view);
    };

    /* config object */
    $scope.uiConfig = {
      calendar: {
        lang: 'da',
        height: 450,
        editable: false,
        selectable: true,


        header: {
          left: 'month basicWeek basicDay',
          center: 'title',
          right: 'today prev,next'
        },
        eventClick: function(date, jsEvent, view) {
          $scope.alertMessage = (date.title + ' was clicked ');
          alert("clicked"+date.title);
        },
        select: function(start, end, allDay)
        {

            var obj = {};
            obj.startAt = start.toDate();


            obj.startAt=new Date(obj.startAt).toUTCString();
            obj.startAt=obj.startAt.split(' ').slice(0, 4).join(' ');

            obj.endAt = end.toDate();
            obj.endAt=new Date(obj.endAt).toUTCString();
            obj.endAt=obj.endAt.split(' ').slice(0, 4).join(' ');

            $rootScope.selectionDate = obj;

            $("#modal1").openModal();

            calendar.fullCalendar('unselect');
        },

        eventRender: $scope.eventRender
      }
    };

    $scope.events=[];
    $scope.eventSources = [$scope.events];
    $http.get("rest/my/list", {
        cache: true,
        params: {}
    }).then(function (data) {
        $scope.events.slice(0, $scope.events.length);
        angular.forEach(data.data, function (value) {
            console.log(value.title);
            $scope.events.push({

                title: value.title,
                description: value.description,
                start: value.startAt,
                end: value.endAt,
                allDay : value.isFull,
                stick: true
            });
        });
    });

    }}

  }]);

update:when i used

app.controller('myNgController', function ($scope,calendarSer)  {

	calendarSer.displayCalendar();

    
  });

the error changed to "angular.js:12520 Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=<div ng-include="'html/DisplayCalander.html'" class="ng-scope">copeProvider%20%3C-%20%24scope%20%3C-%calendarSer"


This is the html where i am including the html file 

<!-- begin snippet: js hide: false console: true babel: false -->

<div ng-include="'html/CalendarAndCards.html'"></div>

and my actual html for calendar

<div class="container" style="margin-top: 25px;">
         <div class="row">
            <div class="col s9 offset-s1">
               <div class="card-panel">
                  <div class="card-content">
                     <div ng-include="'html/DisplayCalander.html'"></div>
                  </div>
               </div>
            </div>
            <div class="col s2">
          
            
            </div>
         </div>
      </div>

You should not use $scope inside factory, service, providers.

So remove it from factory declaration.

change this :

app.factory('calendarSer', ['$scope', '$http','$rootScope', 'uiCalendarConfig', function ($scope, $http,$rootScope, uiCalendarConfig) {...\\

change to:

app.factory('calendarSer', ['$http','$rootScope', 'uiCalendarConfig', function ($http,$rootScope, uiCalendarConfig) {...\\

now, if you need to access $scope data inside factory then simply pass it to the factory methods from your controller. Like :

app.controller('myNgController', ['$scope','calendarSer', function ($scope,calendarSer) {
    calendarSer.displayCalendar($scope);
}]);

and then, access it in factory mehtod like:

displayCalendar : function(scope){..\\use scope inside method

Further : Load all js lib in your html and load controller and service js at the end.