AngularJS controller function not recognized

Question

I have an AngularJS project with the structure shown in the first picture. I use custom tags defined as angularJS components.

My main layout uses the custom tag by displaying it in a tab. The code snippet from my main-layout component is the following:

<uib-tabset type="pills" active="$ctrl.getActiveTab()">

    <uib-tab class="mormontTab" heading="Tab0" ng-show="$ctrl.drFormActive() && $ctrl.daFormInactive()" ng-click="$ctrl.setActiveTab(0)">
        <drform-tag></drform-tag>
    </uib-tab>

    <uib-tab class="mormontTab" heading="Tab1" ng-show="$ctrl.daFormActive() && $ctrl.drFormInactive()" ng-click="$ctrl.setActiveTab(1)">
        <daform-tag></daform-tag>
    </uib-tab>

    <uib-tab class="mormontTab" heading="Tab2" ng-click="$ctrl.setActiveTab(2)">
        <mydocs-tag></mydocs-tag>
    </uib-tab>

    <uib-tab class="mormontTab" heading="Tab3" ng-click="$ctrl.setActiveTab(3)">
    <fluxdocs-tag></fluxdocs-tag>
    </uib-tab>

    <uib-tab class="mormontTab" heading="Tab4" ng-click="$ctrl.setActiveTab(4)">Tab  content
    </uib-tab>

    <uib-tab class="mormontTab" heading="Tab5" ng-click="$ctrl.setActiveTab(5)">Tab  content
    </uib-tab>
</uib-tabset>

My custom tag is a form with many user inputs (associated with ng-model parameters).

The custom tag component is defined in the daform-tag.js file as folows:

angular.module('EasyDocsUBBApp')
    .component('daformTag', {
        templateUrl: 'da-doc/daform-tag.html',
        controller: function (AppService) {
        $ctrl = this;

        $ctrl.expenses = [];

        $ctrl.handleForm = function () {
            AppService.setActiveTab(2);
            AppService.handleDAForm("D");
        };

        $ctrl.handleForm = function () {
            AppService.setActiveTab(2);
            AppService.handleDAForm("D");
        };

        $ctrl.getSumaCercetareSolicitata = function () {
            var suma = 0;
            if ($ctrl.sumaDIFN != undefined)
                suma += $ctrl.sumaDIFN;
            if ($ctrl.sumaDIFI != undefined)
                suma += $ctrl.sumaDIFI;
            if ($ctrl.sumaDICTA != undefined)
                suma += $ctrl.sumaDICTA;
            return suma;
        };

        $ctrl.getSumaCercetareAprobata = function () {
            var suma = 0;
            if ($ctrl.sumaDIFNAC != undefined)
                suma += $ctrl.sumaDIFNAC;
            if ($ctrl.sumaDIFIAC != undefined)
                suma += $ctrl.sumaDIFIAC;
            if ($ctrl.sumaDICTAAC != undefined)
                suma += $ctrl.sumaDICTAAC;
            return suma;
        };

        $ctrl.getSumaCercetare = function () {
            return (ctrl.getSumaCercetareSolicitata() + $ctrl.getSumaCercetareAprobata());
        };


        $ctrl.getSumaAlteleSolicitata = function () {
            var suma = 0;
            if ($ctrl.sumaDIFS != undefined)
                suma += $ctrl.sumaDIFS;
            if ($ctrl.sumaDIFE != undefined)
                suma += $ctrl.sumaDIFE;
            if ($ctrl.sumaDITA != undefined)
                suma += $ctrl.sumaDITA;
            return suma;
        };

        $ctrl.getSumaAlteleAprobata = function () {
            var suma = 0;
            if ($ctrl.sumaDIFSAC != undefined)
                suma += $ctrl.sumaDIFSAC;
            if ($ctrl.sumaDIFEAC != undefined)
                suma += $ctrl.sumaDIFEAC;
            if ($ctrl.sumaDITAAC != undefined)
                suma += $ctrl.sumaDITAAC;
            return suma;
        };

        $ctrl.getSumaAltele = function () {
            return ($ctrl.getSumaAlteleSolicitata() + $ctrl.getSumaAlteleAprobata());
        };


        $ctrl.getSumaTotalaSolicitata = function () {
            var suma = 0;
            if ($ctrl.sumaS != undefined)
                suma += $ctrl.sumaS;
            if ($ctrl.sumaVP != undefined)
                suma += $ctrl.sumaVP;
            return ($ctrl.getSumaCercetareSolicitata() + $ctrl.getSumaAlteleSolicitata() + suma);
        };

        $ctrl.getSumaTotalaAprobata = function () {
            var suma = 0;
            if ($ctrl.sumaSAC != undefined)
                suma += $ctrl.sumaSAC;
            if ($ctrl.sumaVPAC != undefined)
                suma += $ctrl.sumaVPAC;
            return ($ctrl.getSumaCercetareAprobata() + $ctrl.getSumaAlteleAprobata() + suma);
        };
$ctrl.submitForm = function () {
            var rN = {
                      //Json with user inputs
                     };  
            AppService.setActiveTab(0);
            AppService.createDADoc(rN);
        };

    }
});

Mainly, the purpose of the functions above is to take user inputs (numbers) and to display inside a disabled input, the sum of the numbers entered in multiple inputs by the user. Consequently, the disabled inputs that display the sum of the numbers entered by the user refer the functions above using the 'value' attribute, inside my custom tag. Such an example is as follows:

<label>Sum</label>
<input type="number" class="form-control mormontInput" value="{{$ctrl.getSumaCercetareAprobata()}}" placeholder="0" disabled>

My issue is that, when the component is loaded I get in console errors like the following:

As I am relatively new to AngularJS, I am probably doing something wrong. Could someone help me with this?

I should add that the uib-tab that contains the custom tag in question is shown or not-shown using ng-show attribute.

Why does the error say 'function name' is not a function in controller .$ctrl. ... ?

UPDATE: When I use my custom component outside the uib-tabset, it works just fine. Only when used inside the uib-tabset leads to the described issues.

Thank you a lot.

Answer 1

Here you put ctrl instead of $ctrl

 $ctrl.getSumaCercetare = function () {
            return (ctrl.getSumaCercetareSolicitata() + $ctrl.getSumaCercetareAprobata());
        };

but I don't think that this can cause your issue

Answer 2

Here's my shot in the dark: instead of '$ctrl = this;' at the very minimum you need to say 'var $ctrl = this;'.

And really, you shouldn't use '$ctrl' inside your controller (that's just for use in the the template); you should use something like 'var vm = this;' or just use 'this'.