Angular: modal dialog show hide

http://angularjs.org/

by Divya Manu

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<!-- TC TimeOut Dialog box -->
	<div id="TCTimeOutModal" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header pa-model-dialog-box-header">
					<h4 class="modal-title"><b>Product Analytics</b></h4>
				</div>
				<div class="modal-body pa-model-dialog-box-body">
					<p id="errorMsgDisplay">TC Service is taking too long to respond,Please Wait!</p>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default pa-model-dialog-box-footer-button" ng-click="fadeModal()">Ok</button>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

.dataDisplay2 {
    position: absolute;
    top: 65px;
    left: 5px;
}
table {
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-radius: 5px;
    padding: 15px;
    border-spacing: 6px;
    margin-top: 5px;
}
table tr:nth-child(odd) {
    background-color: white;
}
table tr td:nth-child(2) {
    text-align: right;
}
body {
    background-color: #6699cc;
    font-size: 16px;
}
table td {
    vertical-align: top;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller("MyCtrl",['$scope','$interval',function($scope,$interval) {
    var TCTimeOut=$interval(function(){
					 if(!angular.element('#TCTimeOutModal').hasClass('in'))
						 {
					 console.log("initiatedtimeout***********");

					 angular.element("#TCTimeOutModal").modal('show');
						 }
				 },3000);

    
    $scope.fadeModal=function()
    {
         if(angular.isDefined(TCTimeOut))
						 {
						 console.log("cancellingtimeout***********");
						 	 angular.element("#TCTimeOutModal").modal('hide');
						 }
    }
}]);