I am facing an issue with a bootstrap modal that contains a form. The submit button is not triggering a function defined inside my AngularJS controller. Despite being able to read and display data on the page, clicking the submit button does nothing except closing the modal. To troubleshoot, I am attempting to log a message when the submit button is clicked. Any help would be appreciated.
AngularJS:
var app = angular.module('myApp', []);
app.controller('supportController',
function($scope, $http) {
$scope.updateList = function() {
console.log('updateList function invoked!');
};
$http({
method: 'GET',
url: ".../_api/web/lists/GetByTitle('DCO-%20IT%20Issue%20Tracker')/items?",
headers: {"Accept": "application/json;odata=verbose"}
}).then(function (data, status, headers, config) {
$scope.tickets = data.data.d.results;
$scope.tickets.map(ticket => console.log(ticket));
}, function errorCallback(response) {
console.log(response);
});
});
HTML:
<div class="container" ng-controller="supportController">
<div class="row">
<div class="col-12">
<button class="btn btn-secondary btn-block" data-toggle="modal" data-target="#myModal">Submit Issue/Request Ticket</button>
</div>
</div>
<div class="row">
<div class="col-12">
<table id="searchTextResults" class="table table-striped">
<tr>
<th>Title</th>
<th>Network</th>
<th>Details</th>
</tr>
<tr ng-repeat="ticket in tickets">
<td>{{ticket.Title}}</td>
<td>{{ticket.Network}}</td>
<td>{{ticket.Details}}</td>
</tr>
</table>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">DISA Europe - EU34 Support Request</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" method="POST" ng-submit="updateList()">
<div class="form-group">
<!-- <label>Title</label> -->
<div>
<lable>Submitted By</lable>
<div id="user"></div>
</div>
</div>
<div class="form-group">
<label>Title</label>
<div>
<input type="text" class="form-control input-lg" name="title" id="title">
</div>
</div>
<div class="form-group">
<label>Network</label>
<div>
<input type="text" class="form-control input-lg" name="network" id="network">
</div>
</div>
<div class="form-group">
<label>Details</label>
<div>
<input type="text" class="form-control input-lg" name="details" id="details">
</div>
</div>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" class="btn btn-primary" data-dismiss="modal">Submit</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>