Modal window does not popup on ng-click - angularjs

Question

I'm trying to add a modal popup window to my Angular app. Although it lists down the names, when I click on the names a modal doesn't appear. Below is my code
HTML:
<div ng-app="app">
<div ng-repeat="customer in customers">
<button class="btn btn-default" ng-click="open(customer)">{{ customer.name }}</button> <br />
<!--MODAL WINDOW-->
<script type="text/ng-template" id="myContent.html">
<div class="modal-header">
<h3>The Customer Name is: {{ customer.name }}</h3>
</div>
<div class="modal-body">
This is where the Customer Details Goes<br />
{{ customer.details }}
</div>
<div class="modal-footer">
</div>
</script>
</div>
</div>
JS:
var app = angular.module('app', ['ngRoute','ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider.
when('/', {controller:testcontroller, templateUrl:'http://localhost/app/index.php/customer/home'}).
otherwise({redirectTo:'/error'});
});
function test2controller ($scope, $modalInstance, customer) {
$scope.customer = customer;
}
function testcontroller ( $scope, $timeout, $modal, $log) {
$scope.customers = [
{
name: 'Ben',
details: 'Some Details for Ben',
},
{
name: 'Donald',
details: 'Some Donald Details',
},
{
name: 'Micky',
details: 'Some Micky Details',
}
];
$scope.open = function (_customer) {
var modalInstance = $modal.open({
controller: "test2controller",
templateUrl: 'myContent.html',
resolve: {
customer: function()
{
return _customer;
}
}
});
};
}
Can someone let me know what am I doing wrong here?

Answer 1

Controller
$scope.saveFeed = function(feed){
$('#exampleModalCenter').modal('show');
console.log(feed);
}
HTML
<a class="dropdown-item p-3" href="#" ng-click="saveFeed(feed.id)">
<div class="d-flex align-items-top">
<div class="icon font-size-20"><i class="ri-save-line"></i>
</div>
<div class="data ml-2">
<h6>Save Post</h6>
<p class="mb-0">Add this to your saved items</p>
</div>
</div>
</a>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>