Javascript-форум - Модальное окно в Angular Js!!! Не выходит:(!!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Телефонна книгаp</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript" src="bootstrap-modal.js" ></script>

<style type="text/css">
body{
background-image: url(ava7.png);
}

table {
background-color: rgba(169, 169, 169, 0.53);
}
form {
max-width:1100px;
margin: 0 auto;
padding-top: 20px;
position: relative;
}
input[required].ng-pristine {
border-color: #337AB7;
}
input.ng-dirty {
border-color: #337AB7;
}

input.ng-invalid{
border-color: red;
}
input.ng-valid.ng-dirty{
border-color: green;
}
form[novalidate] input {
border-left-width: 8px;
border-color: #337AB7;
border-style: solid;
}

#inputHover:hover{
background-color: #36ee9d;
}
#phone1:hover{
background-color: #36ee9d;
}

</style>

<script type="text/javascript">
var app = angular.module( 'app', [ ] )
.controller('contactlistCtrl', function( $scope ){ 
$scope.newPersonId = -1; 
$scope.contactlist = [ 
{ 
name: 'Білл Гейц',
phone: '+545-6546-5466',
email: 'Bill@gmail.com'
}
];
$scope.addNewPerson = function() { 
if ( $scope.name != '' ) { 
$scope.contactlist .push({ 
name: $scope.name,
phone: $scope.phone,
email: $scope.email
});
$scope.name = ''; 
$scope.phone = ''; 
$scope.email = ''; 
} 
}
$scope.savePerson = function() { 
if( $scope.newPersonId > -1 ){ 
var id = $scope.newPersonId; 
$scope.contactlist [id].name = $scope.name; 
$scope.contactlist [id].phone = $scope.phone; 
$scope.contactlist [id].email = $scope.email;

$scope.name = ''; 
$scope.phone = ''; 
$scope.email = '';
$scope.newPersonId = -1;
}
}
$scope.editPerson = function ( id ) {
$scope.newPersonId = id; 
$scope.name = $scope.contactlist [id].name;
$scope.phone = $scope.contactlist [id].phone;
$scope.email = $scope.contactlist [id].email;

}
$scope.deletePerson = function( id ) { 
$scope.contactlist .splice( id, 1 ); 
$scope.contactlist;
$('#myModal').modal(options);
}

})
jQuery(function($){
$("#phone1").mask(" +380 (99) 999-99-99");
})

</script>
</head>
<body ng-app="app" ng-controller="contactlistCtrl">

<div >

<form name="form" class="form-horizontal" role="form" class="col-md-6" novalidate >
<div class="form-group ">
<div class="col-md-1">
<label class="text-left" for="inputHover">П.І.П.</label>
</div>
<div class="col-md-4">
<input type="text" ng-model="name" name="text" class="form-control" id="inputHover" placeholder="Name" required/>
<span class="error" ng-show="form.text.$error.required">Required!</span>
</div>
</div>

<div class="form-group">
<div class="col-md-1">
<label class="text-left">№ телефону</label>
</div>
<div class="col-md-4">
<input type="text" ng-model="phone" class="form-control" name="number" id="phone1" placeholder="Number" />
<span class="error" ng-show="form.number.$error.required">Required!</span>
<span class="error" ng-show="form.number.$error.number">Not valid number!</span>
</div>
</div>

<div class="form-group">
<div class="col-md-1">
<label class="text-left" >Ел. пошта</label>
</div>
<div class="col-md-4">
<input type="email" ng-model="email" name="email" class="form-control" id="inputHover" placeholder="Email" required/>
<span class="error" ng-show="form.email.$error.required">Required!</span>
<span class="error" ng-show="form.email.$error.email">Not valid email!</span>
</div>
</div>
<div class="form-group">
<div class="col-md-1"></div>
<div class="col-md-4">
<button ng-disabled="form.$invalid" class="btn btn-primary" ng-click="addNewPerson()" ng-hide="newPersonId > -1">Добавити</button>
<button ng-disabled="form.$invalid" class="btn btn-primary" ng-click="savePerson()" ng-show="newPersonId > -1">Зберегти</button>
</div>
</div>
</form>

<table id="contactlist " class="table table-striped">
<thead>
<tr>
<th>№</th>
<th>П.І.П.</th>
<th>№ телефону</th>
<th>Ел. пошта</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in contactlist "> 
<td>{{ $index + 1 }}</td> 
<td>{{ person.name }}</td>
<td>{{ person.phone }}</td>
<td>{{ person.email }}</td>
<td>
<button class="btn btn-primary btn-xs" ng-click="editPerson($index)"><span class="glyphicon glyphicon-pencil"></span>
Ред-ти</button>
<button class="btn btn-primary btn-xs " data-toggle="modal" data-target="#myModal" ng-click="deletePerson($index)" ><span class="glyphicon glyphicon-trash"></span> Видалити</button>
</td>
</tr>
</tbody>
</table>

</div>

<div class="modal fade " id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">x</button>
<h4 class="modal-title" id="myModalLabel">Видалення контакту</h4>
</div>
<div class="modal-body">
<h3>Ви впевнені що хочете видалити цей контакт?</h3>
</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Відміна</button>
<button class="btn btn-primary" type="button">Підтвердити</button></div>
</div>
</div>
</div>

</body>
</html>