ng-click in modal not calling function in component

Question

I am trying to figure out how to get this working.

I am using AngularJS because I do not want to load the complete NPM of Angular and we are using Razor Syntax extensively for the Web Layer

On the Create.cshtml page

<button type="button" ng-click="addApp('Cheese')"
        class="btn-sm btn-default no-modal">
  Add Applications
</button>

Below is how I have the directory stucture is as follows:

WebLayer
+--wwwroot
   +--js
      +--applications (Feature)
         +applications.component.js
         +applications.module.js
         +application.template.html
      +--delegates (Feature)
         +delegates.component.js
         +sames as above
      +--sponsor-applictions
         +same as above

   +--lib
      +angularjs and all other angularjs files
+app.config.js
+app.module.js

Now I have no problems with getting data below in the sponsor-applictions.component.js I am getting my JSON Object Models arrays from my API.

//Author Moojjoo
//Date 5/3/2019
//sponsor-applications
'use strict';

var testUrl = window.location.hostname;
if (testUrl.includes("localhost")) {
    var apiUrl = 'https://localhost:44364';
}
else if (testUrl.includes("uat")) {
    var apiUrl = 'https://localhost:44364'; //TODO when the URL is decided for UAT
}
else {
    var apiUrl = 'https://localhost:44364'; //TODO when the URL is decided for PRD
}

// Register `sponsorApplications` component, along with its associated controller and template
angular.
    module('App').
    component('sponsorApplications', {
        templateUrl: '../../js/sponsor-applications/sponsor-applications.template.html',
        controller: ['$scope', '$http', function SponsorApplications($scope, $http) {
            var user_id = $("#User_Id").val();

            if (user_id != "") {

                $http.get(apiUrl + '/api/v1/Sponsors/' + user_id + '/Applications').then(function successCallback(response) {
                    $scope.sponsorApplications = response.data;
                    console.log($scope.sponsorApplications);
                }, function errorCallback() {
                    //var type = 'warning';
                    //var title = 'User Lookup Required!';
                    //var body = 'Please enter a User Login ID for lookup'
                    alert('Please try again later, network error, email sent to application administrator')
                });
            }
            //TODO - Have to get rows from Modal to Page
            // Add Rows          
            $scope.addApp = function (arg) {
                debugger;
                console.log(arg);
                alert(arg);
                //$scope.table.push($scope.newApp);
                // $scope.newApp = new Object();
            };

            // Remove Rows
            $scope.remove = function (index) {
                debugger;
                $scope.sponsorApplications.splice(index, 1);
            };           
        }
        ]
    });

I am banging my head against the keyboard trying to figure out why the addApp('Cheese') will not event for for ng-click. $scope.remove function works without any issues.

I really need to understand what I am missing. Thank you and if you need more details simply add a comment.

Edit adding full code

app.config

'use strict';

angular.
    module('App').
    config(['$routeProvider',
        function config($routeProvider) {
            $routeProvider.
                when('/Sponsors/Create', {
                    template: '<sponsor-applications></sponsor-applications>'
                }).
                when('/Sponsors/Create', {
                    template: '<applications></applications>'
                }).
                when('/Sponsors/Create', {
                    template: '<sponsor-delegates></sponsor-delegates>'
                }).
                when('/Sponsors/Create', {
                    template: '<delegates></delegates>'
                })
        }
    ]);

app.module.js

'use strict';

angular.module('App', [    
    'ngRoute',    
    'sponsorApplications',
    'applications',
    'sponsorDelegates',
    'delegates'
])
    .run(function () {
        console.log('Done loading dependencies and configuring module!');
    });

sponsor-applications.component.js

//Author Robert B Dannelly
//Date 4/8/2019
//sponsor-applications
'use strict';

var testUrl = window.location.hostname;
if (testUrl.includes("localhost")) {
    var apiUrl = 'https://localhost:44364';
}
else if (testUrl.includes("uat")) {
    var apiUrl = 'https://localhost:44364'; //TODO when the URL is decided for UAT
}
else {
    var apiUrl = 'https://localhost:44364'; //TODO when the URL is decided for PRD
}

// Register `sponsorApplications` component, along with its associated controller and template
angular.
    module('App').
    component('sponsorApplications', {
        templateUrl: '../../js/sponsor-applications/sponsor-applications.template.html',
        controller: ['$scope', '$http', function SponsorApplications($scope, $http) {
            var user_id = $("#User_Id").val();

            if (user_id != "") {

                $http.get(apiUrl + '/api/v1/Sponsors/' + user_id + '/Applications').then(function successCallback(response) {
                    $scope.sponsorApplications = response.data;
                    console.log($scope.sponsorApplications);
                }, function errorCallback() {
                    //var type = 'warning';
                    //var title = 'User Lookup Required!';
                    //var body = 'Please enter a User Login ID for lookup'
                    alert('Please try again later, network error, email sent to application administrator')
                });
            }
            //TODO - Have to get rows from Modal to Page
            // Add Rows          
            $scope.addApp = function (arg) {
                debugger;
                console.log(arg);
                alert(arg);
                //$scope.table.push($scope.newApp);
                // $scope.newApp = new Object();
            };

            // Remove Rows
            $scope.remove = function (index) {
                debugger;
                $scope.sponsorApplications.splice(index, 1);
            };           
        }
        ]
    });

sponsor-applications.module.js

'use strict';

// Define the `sponsorApplicaitons` module
angular.module('sponsorApplications', []);

sponsor-applications.template.html

<style>
    /* Overwrites */

    .btn {
        width: 100%;
    }

</style>
<table class="table-bordered table-striped" style="width:100%;">
    <thead style="font-weight:bold">
        <tr>
            <td>Remove</td>
            <td>Application ID</td>
            <td>Application Name</td>

        </tr>
    </thead>
    <!-- The naming must be exact application matches the $scope.sponsorApplications
         in sponsor-applications.component.js-->
    <tr ng-repeat="app in sponsorApplications">
        <td>
            <a class="btn" ng-click="remove($index)"><i class="fa fa-times" aria-hidden="true"></i></a>
        </td>
        <td>{{ app.application_ID }}</td>
        <td>{{ app.application_Name }}</td>
    </tr>
</table>

Create.cshtml -- ASP.NET Core w/ Razor Syntax ----

@model WEB.ViewModels.AddSponsorViewModel
@using WEB.HtmlHelpers

@{
    ViewData["Title"] = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- Alert Display will be used as a standard on all page simply add this to your page
    https://www.trycatchfail.com/2018/01/22/easily-add-bootstrap-alerts-to-your-viewresults-with-asp-net-core/
    https://www.trycatchfail.com/2018/02/21/easy-bootstrap-alerts-for-your-api-results-with-asp-net-core/-->
@await Html.PartialAsync("~/Views/Shared/_StatusMessages.cshtml")
<h2>Sponsor Information</h2>
<form asp-action="Create" id="CreateSponsor">
    @Html.AntiForgeryToken()
    @*<input type=hidden asp-for="User_ID" />*@
    <input type="hidden" id="User_Id" name="User_Id" value="" />
    <div class="form-horizontal">
        <hr />
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="col-md-12">
            <row>
                <div class="form-group col-md-5">
                    <label asp-for="Domain_ID" class="control-label"></label>
                    <br />
                    <input asp-for="Domain_ID" class="form-control" />
                    <span asp-validation-for="Domain_ID" class="text-danger"></span>
                </div>
                <div class="col-md-2">
                    &nbsp;
                </div>
                <div class="form-group col-md-5">
                    <label asp-for="Name" class="control-label"></label>
                    <br />
                    <input asp-for="Name" class="form-control" />
                    @*@Html.AutocompleteFor(model => Core.Models.SearcherUser.Name, model => Core.Models.SearcherUser.Email, "GetSponsor", "Approval", false)*@
                    <span asp-validation-for="Name" class="text-danger"></span>
                </div>
            </row>
        </div>
        <div class="col-md-12">
            <row>
                <div class="form-group col-md-12">
                    <label asp-for="Email" class="control-label"></label>
                    <br />
                    <input asp-for="Email" class="form-control" />
                    <span asp-validation-for="Email" class="text-danger"></span>
                </div>
            </row>
        </div>
        <div class="col-md-12" style="margin-top:20px">
            <row>
                <div class="col-md-6">
                    <strong>Delegates</strong>&nbsp;<asp:button formnovalidate="formnovalidate" id="addDelegate" style="cursor: pointer" class="btn-xs btn-primary" data-toggle="modal" data-target="#delegatesModal">Add</asp:button>
                    <!-- AngularJS defined in wwwroot > js > sponsor-applications -->
                    <sponsor-delegates></sponsor-delegates>
                </div>
                <div id="divMyAppCtrl" class="col-md-6">
                    <strong>Applications</strong>&nbsp;<asp:button formnovalidate="formnovalidate" id="addApplication" style="cursor: pointer" class="btn-xs btn-primary" data-toggle="modal" data-target="#appModal">Add</asp:button>
                    <!-- AngularJS defined in wwwroot > js > sponsor-applications -->
                    <br />
                    <sponsor-applications></sponsor-applications>
                </div>
            </row>
        </div>
        <div class="col-md-12" style="margin-top:50px;">
            <row>
            <div class="col-md-2">
                <input type="submit" value="Delete" disabled class="btn btn-default" />
            </div>
            <div class="col-md-offset-6 col-md-2" style="text-align:right">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
            <div class="col-md-2">
                <button class="btn btn-default" type="button" id="cancel" onclick="location.href='@Url.Action("Index", "Sponsors")'">Cancel</button>
            </div>
            </row>
        </div>
    </div>
</form>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

<!-- Modal to select delegates for sponsor -->
<div class="modal fade" tabindex="-1" role="dialog" id="delegatesModal">    
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <strong>Please select the Delegates</strong>
                <div id="delgates_tbl">
                    <!-- AngularJS defined in wwwroot > js > applications -->
                    <delegates></delegates>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-sm btn-default no-modal" data-dismiss="modal" id="closeDelegate">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Add Applications Button in Modal

<!-- Modal to select application for sponsor -->
<div class="modal fade" tabindex="-1" role="dialog" id="appModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <strong>Please select the applications</strong>
                <div id="divModalApps">
                    <!-- AngularJS defined in wwwroot > js > applications -->
                    <applications></applications>
                </div>
            </div>
            <div class="modal-footer"> 
                <button type="button"
                        ng-click="addApp('Cheese')"
                        class="btn-sm btn-default no-modal">
                  Add Applications
                </button>
                <button type="button" class="btn-sm btn-default no-modal"
                        data-dismiss="modal" id="closeApps">
                  Close
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

----

the button HTML is on the Create.cshtml page, but so are all the templates aka

<sponsor-applications>
</sponsor-applications> 

Also note that in the _Layouts.cshtml page all js files are referenced. ~/app.module.js , ~/app.config.js , ~/js/sponsor-delegates/sponsor-delegate.module.js , ~/js/sponsor-delegates/sponsor-delegates.component.js

Answer 1

sponsor-applications.component.js

//Author Robert B Dannelly
//Date 4/8/2019
//sponsor-applications
'use strict';

var testUrl = window.location.hostname;
if (testUrl.includes("localhost")) {
    var apiUrl = 'https://localhost:44364';
}
else if (testUrl.includes("uat")) {
    var apiUrl = 'https://localhost:44364'; //TODO when the URL is decided for UAT
}
else {
    var apiUrl = 'https://localhost:44364'; //TODO when the URL is decided for PRD
}

// Register `sponsorApplications` component, along with its associated controller and template
angular.
    module('App').
    component('sponsorApplications', {
        templateUrl: '../../js/sponsor-applications/sponsor-applications.template.html',
        controller: ['$scope', '$http', function SponsorApplications($scope, $http) {
            var user_id = $("#User_Id").val();

            if (user_id != "") {

                $http.get(apiUrl + '/api/v1/Sponsors/' + user_id + '/Applications').then(function successCallback(response) {
                    $scope.sponsorApplications = response.data;
                    console.log($scope.sponsorApplications);
                }, function errorCallback() {
                    //var type = 'warning';
                    //var title = 'User Lookup Required!';
                    //var body = 'Please enter a User Login ID for lookup'
                    alert('Please try again later, network error, email sent to application administrator')
                });
            }
            //TODO - Have to get rows from Modal to Page
            // Add Rows 


**********************BELOW is the correct SYNTAX********************            
            this.addApp = function (arg) {
                alert(arg);
                debugger;
                console.log(arg);                
            };



            //$scope.addApp = function (arg) {
            //    debugger;
            //    console.log(arg);
            //    alert(arg);
            //    //$scope.table.push($scope.newApp);
            //    // $scope.newApp = new Object();
            //};

            // Remove Rows
            $scope.remove = function (index) {
                debugger;
                $scope.sponsorApplications.splice(index, 1);
            };           
        }
        ]
    });

Create.cshtml Changes

In the template

<div id="divMyAppCtrl" class="col-md-6">
                    <strong>Applications</strong>&nbsp;<asp:button formnovalidate="formnovalidate" id="addApplication" style="cursor: pointer" class="btn-xs btn-primary" data-toggle="modal" data-target="#appModal">Add</asp:button>
                    <!-- AngularJS defined in wwwroot > js > sponsor-applications -->
                    <br />
                    <sponsor-applications ng-ref="sponsorApplications"></sponsor-applications>
                </div>

Add Applications Modal in the footer

<div class="modal-footer"> 
                <button type="button" ng-click="sponsorApplications.addApp('CLicked')" class="btn-sm btn-default no-modal">Add Applications</button>
                <button type="button" class="btn-sm btn-default no-modal" data-dismiss="modal" id="closeApps">Close</button>
            </div>