How to inject service in angular js version more then 1.5x in the component?

Question

I am working with angular js 1.5x version and I am doing this with component and I have written the service and trying to inject the service in the controller, but I am facing some error :

Error: [$injector:unpr] http://errors.angularjs.org/1.5.7/$injector/unpr?p0=MyServiceProvider%20%3C-%20MyService

Here is my code:

 (function () {
//var app = angular.module("teleconsultantVideo");

app.component('teleVideo', {
    bindings: { accessToken: '@' },
    templateUrl: './teleconsultant-video/teleconsultant-video.component.html',
    controller: TeleconsultantVideoController,
    controllerAs: 'ctrl',


});


function TeleconsultantVideoController($scope) {
    var ctrl = this;
    $ctrl.$onInit = function () {
        alert("Hi");
    }      
        MyService.loadSecurityMatrix($scope.accessToken)
        $scope.onCallDisconnect = true;        

}

app.controller("TeleconsultantVideoController", TeleconsultantVideoController);
TeleconsultantVideoController.$inject = ['$scope', 'MyService'];
})();

my service :

(function () {
// var app = angular.module("teleconsultantVideo");

function MyService($http, $q) {

    function loadSecurityMatrix(token) {

        alert("into the function");
        var authToken = token;
        var config = { 'headers': { 'Authorization': "Bearer " + authToken } };
        return $http.get('http://localhost:3000/securityMatrix', config).then(function (result) {
            // this._loggedInCustomer = this.mapToLocal(response);
            return result;
        }, function (err) {
            return err;
        });
    }
}

app.service('MyService', MyService);
MyService.$inject = ['$http', '$q'];

 });

Answer 1

Can you try something like this?

  (function() {
    'use strict';

    angular
        .module('moduleName')
        .factory('yourService', Service);

    function Service($http, $rootScope, $q,$window) {
        return {
            //YOUR METHODS
        }
    }
    })();



 ////// ***YOUR CONTROLLER ***///////////
    function CtrlName($scope,yourService) {
        //CODE HERE
    };
    angular
        .module('moduleName')
        .controller('CtrlName', ['$scope','yourService',CtrlName])

Answer 2

you miss the injection on your controller

function TeleconsultantVideoController($scope)

->function TeleconsultantVideoController($scope, MyService )

function TeleconsultantVideoController($scope) {
    var ctrl = this;
    $ctrl.$onInit = function () {
        alert("Hi");
    }      
        MyService.loadSecurityMatrix($scope.accessToken)
        $scope.onCallDisconnect = true;        

}

to this

function TeleconsultantVideoController($scope, MyService) {
    var ctrl = this;
    $ctrl.$onInit = function () {
        alert("Hi");
    }      
        MyService.loadSecurityMatrix($scope.accessToken)
        $scope.onCallDisconnect = true;        

}