Angular not recognising my controller

Question

I cant understand why but angular is giving me the following error and Reading more about it online I understand others have the same error when they have some kind of typo in naming the controller or modules. So I have checked config, service and html code 100 times and I believe they all look fine;

I can't understand what am I missing? or what to look for!

Many Thanks in Advance.

Error:

ng:areq; Bad Argument

Argument 'LoyaltyController' is not

Description

AngularJS often asserts that certain values will be present and truthy using a helper function. If the assertion fails, this error is thrown. To fix this problem, make sure that the value the assertion expects is defined and truthy.

MY Loyalty Controller

(function () {
    'use strict';

    angular
        .module('app')
        .controller('LoyaltyController', LoyaltyController);

    LoyaltyController.$inject = ['navigationService','loyaltyService', '$scope', 'ionicMaterialInk', 'ionicMaterialMotion'];
    function LoyaltyController(navigationService, loyaltyService, dealService, $scope, ionicMaterialInk, ionicMaterialMotion) {
        // Set Header
        $scope.$parent.$parent.$parent.showHeader();
        $scope.$parent.$parent.$parent.clearFabs();
        $scope.$parent.$parent.$parent.setExpanded(false);
        $scope.$parent.$parent.$parent.setHeaderFab(false);

        var vm = this;
        vm.loyalty = [];

        loyaltyService.getUserLoyalty()
            .success(function (data, status, headers, config) {
                vm.loyalty = data;
        });

        vm.menuItems = [];

        navigationService.getAllNavigations()
            .success(function (data, status, headers, config) {
                vm.menuItems = data;

                $timeout(function () {
                    // Set Motion
                    ionicMaterialMotion.fadeSlideInRight();

                    // Set Ink
                    ionicMaterialInk.displayEffect();
                }, 100);
            });

        // Delay expansion

        $timeout(function () {

            ionicMaterialMotion.slideUp({
                selector: '.slide-up'
            });
        }, 300);
    };
})();

Answer 1

You forget to inject dealService But you mentioned it in controller method.

LoyaltyController.$inject = ['navigationService','loyaltyService', '$scope', 'ionicMaterialInk', 'ionicMaterialMotion'];
    function LoyaltyController(navigationService, loyaltyService, dealService, $scope, ionicMaterialInk, ionicMaterialMotion) {
                                                                      ^    
                                                                      |
                                                                     here

You have to inject according to your controller method parameter or you have to declare controller method parameter according to your injector Whetever language you choose both have to be equal and according to order .

LoyaltyController.$inject = ['navigationService','loyaltyService','dealService','$scope', 'ionicMaterialInk', 'ionicMaterialMotion'];

Answer 2

The issue was that I forgot to attach the controller and service to my main html.

also as Anik pointed out I was calling the dealService without injecting it in my controller. another issue was the timeout function, I had to more it up in the file for it to work.