<!DOCTYPE html>
<html ng-app="ekathuwaApp">

  <head>
    <title>Ekathuwa Angularjs Bootstrap 3 Modal service</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    
    <link data-require="bootstrap-css@*" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
    <link data-require="bootstrap@3.0.0" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
    <script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
    
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
    <script src="//code.angularjs.org/1.2.2/angular-route.js"></script>
     <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
    <script data-require="bootstrap@3.0.0" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
    <script src="ekathuwa.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body  ng-controller="MainCtrl">
   <div class="my-container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                    <div class="container">
                        <ul class="nav navbar-nav pull-left">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Master <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-controller="CustomerCtrl"><a ng-click="CustomerModal()">Customer</a></li>
                                   
                                </ul>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav pull-left">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">New <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-controller="JobCtrl"><a ng-click="clearSelectedJob();NewJobModal()">Job</a></li>
                                  
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-2 column well">
                <div class="classWithPad">
                    <div class="my-container well classWithPad">
                        <table class="table table-condensed">
                            <span style="background:#595959;display:block;margin-top:-20px;margin-right:-11px;margin-left:-11px;height:95px">ll</span>
                            <thead> <tr><th style="font-weight: bold;padding-top:30px">No</th><th style="font-weight: bold;">Name</th></tr></thead>
                            <tbody>
                                <tr ng-repeat="currentItem in jobArray" class="pointer no_selection" ng-class="{highlight: currentItem.JobNumber===selectedJob.JobNumber}">
                                    <td>{{currentItem.JobNumber}}</td>
                                    <td>{{currentItem.JobName}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-10 column well">
                <div class="classWithPad">
                    <ul class="nav nav-tabs">
                        <li ng-class="{active: isActive('/')}"><a ng-href="#/">Home</a></li>
                        <li ng-class="{active: isActive('/changeOrder')}"><a ng-href="#/changeOrder">Change Order</a></li>
                        <li ng-class="{active: isActive('/purchaseOrder')}"><a ng-href="#/purchaseOrder">Purchase Order</a></li>
                    </ul>
                    <div ng-view=""></div>
                </div>
            </div>
       
            <div class="col-md-12 column">
                <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
                    <div class="my-container">

                    </div>
                </nav>
            </div>
        </div>
    </div>
  </body>

</html>
angular.module('ekathuwaApp', ['ngRoute', 'ngEkathuwa', 'ui.bootstrap','ngResource']);
angular.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
          templateUrl: 'main.html',
          controller: 'MainCtrl'
      })
      
      .otherwise({
          redirectTo: '/'
      });
});

//Basic modal
var MainCtrl = function($scope, $ekathuwa, $q, $location) {
$scope.jobArray = [
    {JobName: 'PizzaHut', JobNumber: '1234'}, 
    {JobName: 'PappaJohns', JobNumber: '9876'}
    ];
 //Main Navigation Tabs
    $scope.isActive = function (route) {
        return route === $location.path();
    };
  
};

body {
    background: #595959;
    padding-top: 70px;
    padding-bottom: 70px;
    padding-right: 70px;
    padding-left: 70px;
}
/* Full screen container */
.my-container {
    margin-left: auto;
    margin-right: auto;
}

.main-Views {
    overflow: auto;
    /*min-height:740px;
    max-height:740px*/
}

.classWithPad {
    margin: 10px;
    padding: 10px;
}

.well {
    background-color: white;
    margin-top: -1px;
}
/*Remove text wrap table headers/td */
table, th, td {
    white-space: nowrap;
}
/*Cursor hand*/
.pointer {
    cursor: pointer;
}
/*Table selection color/ hover*/
.table-striped tbody tr.highlight td {
    background-color: #428bca;
    color: white;
}
.table tbody tr:not(.highlight):hover td,
.table tbody tr:not(.highlight):hover th {
    background-color: transparent;
}
/*Change Color of Links*/
a {
    color: black;
}

/*Default Button Color/Size*/
.btn {
    background-color: #A6A6A6;
    color: white;
}

#btn-width {
    width: 80px;
}
/**
 * ekathuwa
 * @version v0.2.0 - 2013-11-24
 * @link https://github.com/sarath2/ngEkathuwa
 * @author Sarath Ambegoda <sarath2mail@gmail.com>
 * @license MIT License, http://www.opensource.org/licenses/MIT
 */
!function(){"use strict";angular.module("ngEkathuwa",[]),angular.module("ngEkathuwa",[]).run(["$rootScope","$ekathuwa",function(a,b){a.$ekathuwa=b}]).provider("$ekathuwa",function(){this.$get=["$compile","$rootScope","$timeout","$q",function(a,b,c,d){return this.modal=function(e){var f={id:"ekathuwaModalID",scope:b.$new(),controller:null,backdrop:!0,keyboard:!0,remote:!1,show:!0,modalClass:"fade",role:"dialog",contentStyle:null,contentCustomSize:0,contentPreSize:"df",templateURL:null,templateHTML:null,bodyTemplateURL:null,bodyTemplate:null,header:!0,headerText:null,headerClass:"",headerTemplate:null,headerCloseBtn:!0,footer:!0,footerClass:"",footerTemplate:null,footerCloseBtn:!0,footerSaveBtn:!1},g="",h="",i="",j="",k="",l="";e=angular.extend(f,e);var m={backdrop:e.backdrop,keyboard:e.keyboard,remote:e.remote,show:e.show},n="#"+e.id+" .modal";if(i=e.controller?"ng-controller="+e.controller:"",null!==e.templateURL&&""!==e.templateURL)g="<div "+i+' id="'+e.id+'" ng-include="\''+e.templateURL+"'\"></div>";else{var o="<div "+i+' id="'+e.id+'">';if(null!==e.templateHTML&&""!==e.templateHTML)g=o+e.templateHTML+"</div>";else{if(j=null!==e.bodyTemplateURL&&""!==e.bodyTemplateURL?'<div class="modal-body" ng-include="\''+e.bodyTemplateURL+"'\"></div>":null!==e.bodyTemplate&&""!==e.bodyTemplate?'<div class="modal-body">'+e.bodyTemplate+"</div>":'<div class="modal-body">Ekathuwa modal body.</div>',e.header)if(null!==e.headerTemplate&&""!==e.headerTemplate)l='<div class="modal-header '+e.headerClass+'">'+e.headerTemplate+"</div>";else{var p="";null!==e.headerText&&""!==e.headerText&&(p='<h4 id="myModalLabel" class="modal-title">'+e.headerText+"</h4>"),l='<div class="modal-header '+e.headerClass+'"><button ng-if="'+e.headerCloseBtn+'" aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>'+p+"</div>"}e.footer&&(k=null!==e.footerTemplate&&""!==e.footerTemplate?'<div class="modal-footer '+e.footerClass+'">'+e.footerTemplate+"</div>":'<div class="modal-footer '+e.footerClass+'"><button ng-if="'+e.footerCloseBtn+'" data-dismiss="modal" class="btn btn-default" type="button">Close</button><button ng-if="'+e.footerSaveBtn+'" class="btn btn-primary" type="button">Save changes</button></div>'),g=o+'<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="myModal" style="display: none;"><div class="modal-dialog"><div class="modal-content">'+l+j+k+"</div></div></div></div>"}}switch(null!==e.contentStyle&&""!==e.contentStyle&&(h=e.contentStyle),0!==e.contentCustomSize&&angular.isNumber(e.contentCustomSize)&&""!==e.contentCustomSize&&null!==e.contentCustomSize&&(h=h+";width: "+e.contentCustomSize+"%;"),e.contentPreSize){case"sm":h+=";width:25%;";break;case"md":h+=";width:50%;";break;case"lg":h+=";width:75%;";break;case"fl":h+=";width:100%;"}var q="#"+e.id+" .modal-dialog { "+h+"} @media (max-width: 768px) {#"+e.id+" .modal-dialog {width:90%;}}";angular.element("#ekathuwaSt"+e.id).remove(),angular.element("head").append('<style id="ekathuwaSt'+e.id+'">'+q+"</style>"),angular.element("#"+e.id).remove();var r=angular.element(g);angular.element("body").append(r),a(r)(e.scope);var s=d.defer();return null!==e.templateURL&&""!==e.templateURL?c(function(){s.resolve(angular.element(n).modal(m))},300):s.resolve(angular.element(n).modal(m)),s.promise},this}]})}(window,document);
<div data-backdrop="static" data-keyboard="false" class="modal fade" id="editChangeOrderModal" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
   <div class="vertical-alignment-helper">
        <div class=" modal-dialog vertical-align-center" style="width:70%">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom:none;">
                    <!--<h4 class="modal-title custom_align" id="Heading">New Job</h4>-->

                </div>
                <div class="modal-body lg-modal-content">
                    <form enctype="multipart/form-data" class="form-horizontal custom-form">
                        <div class="row clearfix">
                            <div class="col-lg-12">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h3 style="margin-left:195px">Job</h3><br />
                                        <div class="form-group clearfix">
                                            <label class="col-sm-3 control-label text-right" for="jobNumber">Number</label>
                                            <div class="col-sm-9">
                                                <input ng-model="currentItem.JobNumber" type="text" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group clearfix">
                                            <label class="col-sm-3 control-label text-right">Name</label>
                                            <div class="col-sm-9">
                                                <input ng-model="currentItem.JobName" type="text" class="form-control input-md">
                                            </div>
                                        </div>

                                        <div class="form-group clearfix">
                                            <label class="col-sm-3 control-label text-right" for="jobAddress">Address</label>
                                            <div class="col-sm-9">
                                                <input ng-model="currentItem.JobAddress" type="text" class="form-control input-md">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label"></label>
                                            <div class="col-sm-9">

                                                <div class="row">

                                                    <div class="col-sm-6 form-group">
                                                        <input type="text" class="form-control input-md" ng-model="currentItem.JobCity" placeholder="City">
                                                    </div><!--nested col-sm-6-->

                                                    <div class="col-sm-2 form-group">
                                                        <input type="text" class="form-control input-md" ng-model="currentItem.JobState" placeholder="ST">
                                                    </div><!--nested col-sm-2-->
                                                    <div class="col-sm-4 form-group">
                                                        <input type="text" class="form-control input-md" ng-model="currentItem.JobZipcode" placeholder="Zipcode">
                                                    </div><!--nested col-sm-4-->

                                                </div><!-- /.form-group > .row -->
                                            </div><!-- /.col-sm-9 -->
                                        </div><!-- /.form-group -->
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">Phone / Fax</label>
                                            <div class="col-sm-9">

                                                <div class="row">

                                                    <div class="col-sm-6 form-group">
                                                        <input ng-model="currentItem.JobPhoneNumber" type="text" class="form-control input-md" ui-mask="{{'(999) 999-9999'}}">
                                                    </div><!--nested col-sm-6-->

                                                    <div class="col-sm-6 form-group">
                                                        <input ng-model="currentItem.JobPhoneNumber" type="text" class="form-control input-md" ui-mask="{{'(999) 999-9999'}}">
                                                    </div><!--nested col-sm-6-->


                                                </div><!-- /.form-group > .row -->
                                            </div><!-- /.col-sm-9 -->
                                        </div><!-- /.form-group -->
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">TES PM / Super</label>
                                            <div class="col-sm-9">

                                                <div class="row">

                                                    <div class="col-sm-6 form-group">
                                                        <select class="form-control" ng-options="employee.EmployeeId  as employee.EmployeeFirstName + ' ' + employee.EmployeeLastName for employee in employeeArray | filter:{EmployeeIsPM : true}" ng-model="currentItem.JobTESPMId">
                                                            <option value="" selected="selected"></option>
                                                        </select>
                                                    </div><!--nested col-sm-6-->

                                                    <div class="col-sm-6 form-group">
                                                        <select class="form-control" ng-options="employee.EmployeeId as employee.EmployeeFirstName + ' ' + employee.EmployeeLastName for employee in employeeArray | filter:{EmployeeIsSuper : true}" ng-model="currentItem.JobTESSuperintendentId">
                                                            <option value="" selected="selected"></option>
                                                        </select>
                                                    </div><!--nested col-sm-6-->


                                                </div><!-- /.form-group > .row -->
                                            </div><!-- /.col-sm-9 -->
                                        </div><!-- /.form-group -->

                                    </div><!--End col-6-->

                                    <div class="col-md-6 column">
                                        <h3 style="margin-left:195px">Customer</h3>
                                        <!--<div class="form-group clearfix" style="float:right">
                                            <label class="col-sm-3 control-label text-right">Status</label>&nbsp;&nbsp;
                                            <div class="col-sm-9">
                                                <input style="width:50px" type="checkbox" ng-model="currentItem.status" value="" class="form-control" ng-true-value="Active" ng-false-value="InActive" >
                                            </div>
                                        </div>-->
                                        <br />

                                        <!-- Multiple Checkboxes (inline) -->


                                        <div class="form-group clearfix">
                                            <label class="col-sm-3 control-label text-right">Customer</label>
                                            <div class="col-sm-9">
                                                <input class="form-control input-md" type="text" ng-model="currentItem.Customer.CustomerName"
                                                       typeahead="customer.CustomerName for customer in customerArray | filter:$viewValue"
                                                       typeahead-on-select="selectCustomer($item)">
                                            </div>
                                        </div>
                                        <input ng-hide="true" type="number" ng-model="currentItem.CustomerId" />
                                        <div class="form-group clearfix">
                                            <label class="col-sm-3 control-label text-right">Address</label>
                                            <div class="col-sm-9">
                                                <input ng-model="currentItem.Customer.CustomerAddress" type="text" class="form-control input-md">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label"></label>
                                            <div class="col-sm-9">

                                                <div class="row">

                                                    <div class="col-sm-6 form-group">
                                                        <input type="text" class="form-control" ng-model="currentItem.Customer.CustomerCity" placeholder="City">
                                                    </div><!--nested col-sm-6-->

                                                    <div class="col-sm-2 form-group">
                                                        <input type="text" class="form-control" ng-model="currentItem.Customer.CustomerState" placeholder="ST">
                                                    </div><!--nested col-sm-2-->
                                                    <div class="col-sm-4 form-group">
                                                        <input type="text" class="form-control" ng-model="currentItem.Customer.CustomerZipcode" placeholder="Zipcode">
                                                    </div><!--nested col-sm-4-->

                                                </div><!-- /.form-group > .row -->
                                            </div><!-- /.col-sm-9 -->
                                        </div><!-- /.form-group -->

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">Phone / Fax</label>
                                            <div class="col-sm-9">

                                                <div class="row">

                                                    <div class="col-sm-6 form-group">
                                                        <input ng-model="currentItem.Customer.CustomerPhoneNumber" type="text" class="form-control input-md" ui-mask="{{'(999) 999-9999'}}">
                                                    </div><!--nested col-sm-6-->

                                                    <div class="col-sm-6 form-group">
                                                        <input ng-model="currentItem.Customer.CustomerFaxNumber" type="text" class="form-control input-md" ui-mask="{{'(999) 999-9999'}}">
                                                    </div><!--nested col-sm-6-->


                                                </div><!-- /.form-group > .row -->
                                            </div><!-- /.col-sm-9 -->
                                        </div><!-- /.form-group -->

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">PM / Super</label>
                                            <div class="col-sm-9">

                                                <div class="row">

                                                    <div class="col-sm-6 form-group">
                                                        <select id="customerPM" name="customerPM" class="form-control" ng-options="customer.CustomerEmployeeId as customer.CustomerEmployeeFirstName + ' ' + customer.CustomerEmployeeLastName for customer in customerEmployeeArray | filter:{CustomerEmployeeRole : 'PM', CustomerId : currentItem.CustomerId}" ng-model="currentItem.CustomerEmployeePMId">
                                                            <option value="" selected="selected"></option>
                                                        </select>
                                                    </div><!--nested col-sm-6-->

                                                    <div class="col-sm-6 form-group">
                                                        <select id="customerSuper" name="customerSuper" class="form-control" ng-options="customer.CustomerEmployeeId as customer.CustomerEmployeeFirstName + ' ' + customer.CustomerEmployeeLastName for customer in customerEmployeeArray | filter:{CustomerEmployeeRole : 'Superintendent', CustomerId : currentItem.CustomerId}  " ng-model="currentItem.CustomerEmployeeSuperintendentId">
                                                            <option value="" selected="selected"></option>
                                                        </select>
                                                    </div><!--nested col-sm-6-->


                                                </div><!-- /.form-group > .row -->
                                            </div><!-- /.col-sm-9 -->
                                        </div><!-- /.form-group -->
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">Admin / Acct</label>
                                            <div class="col-sm-9">

                                                <div class="row">

                                                    <div class="col-sm-6 form-group">
                                                        <select id="customerPM" name="customerAdmin" class="form-control" ng-options="customer.CustomerEmployeeId as customer.CustomerEmployeeFirstName + ' ' + customer.CustomerEmployeeLastName for customer in customerEmployeeArray | filter:{CustomerEmployeeRole : 'Admin', CustomerId : currentItem.CustomerId}" ng-model="currentItem.CustomerEmployeePMId">
                                                            <option value="" selected="selected"></option>
                                                        </select>
                                                    </div><!--nested col-sm-6-->

                                                    <div class="col-sm-6 form-group">
                                                        <select id="customerSuper" name="customerAccountant" class="form-control" ng-options="customer.CustomerEmployeeId as customer.CustomerEmployeeFirstName + ' ' + customer.CustomerEmployeeLastName for customer in customerEmployeeArray | filter:{CustomerEmployeeRole : 'Accountant', CustomerId : currentItem.CustomerId}  " ng-model="currentItem.CustomerEmployeeSuperintendentId">
                                                            <option value="" selected="selected"></option>
                                                        </select>
                                                    </div><!--nested col-sm-6-->


                                                </div><!-- /.form-group > .row -->
                                            </div><!-- /.col-sm-9 -->
                                        </div><!-- /.form-group -->
                                        <!--End col-6-->
                                    </div>
                                    <!--End Row-->
                                    <div class="row clearfix">
                                        <div class="col-md-12 column">
                                            <tabset>
                                                <tab heading="Contract">
                                                    <div>
                                                        <div class="row clearfix">
                                                            <div class="well" style="margin-top:115px;visibility:hidden">
                                                                <span>Drag File Here</span>
                                                            </div>
                                                            <div class="col-md-6 column" style="margin-top:-90px">
                                                                <input ng-hide="true" type="number" ng-model="currentItem.GeoAreaId" />
                                                                <input ng-hide="true" type="number" ng-model="currentItem.JobTypeId" />
                                                                <input ng-hide="true" type="number" ng-model="currentItem.JobClassId" />
                                                                <div class=" form-group clearfix">
                                                                    <label class="col-md-3 control-label text-right" for="jobOriginalContract">Original Contract</label>
                                                                    <div class="col-md-9">
                                                                        <input id="jobOriginalContract" name="jobOriginalContract" type="text" class="form-control input-md" ng-model="currentItem.JobOriginalContract" format="number">
                                                                    </div>
                                                                </div>

                                                                <div class="form-group clearfix">
                                                                    <label class="col-md-3 control-label text-right" for="jobTotalCO">Total CO</label>
                                                                    <div class="col-md-9">
                                                                        <input id="jobTotalCO" name="jobTotalCO" type="text" class="form-control input-md" ng-model="currentItem.JobTotalCO" format="number">
                                                                    </div>
                                                                </div>

                                                                <div class="form-group clearfix">
                                                                    <label class="col-md-3 control-label text-right" for="jobRevisedContract">Revised Contract</label>
                                                                    <div class="col-md-9">
                                                                        <input id="jobRevisedContract" name="jobRevisedContract" type="text" class="form-control input-md" ng-model="currentItem.JobRevisedContract" format="number">
                                                                    </div>
                                                                </div>
                                                                <!-- Select Basic -->
                                                                <div class="form-group clearfix">
                                                                    <label class="col-md-3 control-label text-right" for="jobRetainage">Retainage</label>
                                                                    <div class="col-md-9">
                                                                        <select id="jobRetainage" name="jobRetainage" class="form-control" ng-model="currentItem.JobRetainage">
                                                                            <option value="" selected="selected">Select</option>
                                                                            <option value="0">0%</option>
                                                                            <option value="5">5%</option>
                                                                            <option value="10">10%</option>
                                                                        </select>
                                                                    </div>
                                                                </div>

                                                                <div class="form-group clearfix">
                                                                    <label class="col-md-3 control-label text-right" for="originalBudget">Budget</label>
                                                                    <div class="col-md-9">
                                                                        <input id="originalBudget" name="originalBudget" type="text" class="form-control input-md" ng-model="currentItem.JobOriginalBudget" format="number">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!--End col-6-->
                                                            <div class="col-md-6 column" style="margin-top:-90px">
                                                                <!-- Select Basic -->
                                                                <div class="form-group clearfix">
                                                                    <label class="col-md-3 control-label text-right" for="GeoArea">GeoArea</label>
                                                                    <div class="col-md-9">
                                                                        <select id="GeoArea" name="GeoArea" class="form-control" ng-model="currentItem.GeoAreaId" ng-options="job.GeoAreaName for job in geoAreaArray" required>
                                                                            <option value=""></option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <!-- Select Basic -->
                                                                <div class="form-group clearfix">
                                                                    <label class="col-md-3 control-label text-right" for="JobClass">Job Class</label>
                                                                    <div class="col-md-9">
                                                                        <select id="JobClass" name="JobClass" class="form-control" ng-model="currentItem.JobClassId" ng-options="job.JobClassName for job in jobClassArray" required>
                                                                            <option value=""></option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <!-- Select Basic -->
                                                                <div class="form-group clearfix">
                                                                    <label class="col-md-3 control-label text-right" for="JobType">JobType</label>
                                                                    <div class="col-md-9">
                                                                        <select id="JobType" name="JobType" class="form-control" ng-model="currentItem.JobTypeId" ng-options="job.JobTypeName for job in jobTypeArray" required>
                                                                            <option value=""></option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <!-- Multiple Checkboxes (inline) -->
                                                                <div class="form-group">
                                                                    <label class="col-md-3 control-label text-right" for="TaxExempt">Tax Exempt</label>
                                                                    <div class="col-sm-9">

                                                                        <div class="row">

                                                                            <div class="col-sm-6 form-group">
                                                                                <input style="width:20px" type="checkbox" name="TaxExempt" id="TaxExempt-0" class="form-control" ng-model="currentItem.JobTaxExempt">
                                                                            </div><!--nested col-sm-6-->

                                                                            <div class="col-sm-6 form-group">
                                                                                <label style="margin-right:20px" class="col-md-8 control-label text-right" for="CertPayroll">Certified Payroll</label>
                                                                                <input style="width:20px" type="checkbox" name="CertPayroll" id="CertPayroll-0" class="form-control" ng-model="currentItem.JobCertPayroll">
                                                                            </div><!--nested col-sm-6-->


                                                                        </div><!-- /.form-group > .row -->
                                                                    </div><!-- /.col-sm-9 -->
                                                                </div><!-- /.form-group -->
                                                                <!-- Select Basic -->
                                                                <div class="form-group clearfix">
                                                                    <label class="col-md-3 control-label text-right" for="InsProgram">Ins Program</label>
                                                                    <div class="col-md-9">
                                                                        <select id="InsProgram" name="InsProgram" class="form-control" ng-model="currentItem.JobInsProgram">
                                                                            <option value="" selected="selected">Select</option>
                                                                            <option value="None">None</option>
                                                                            <option value="CCIP">CCIP</option>
                                                                            <option value="OCIP">OCIP</option>
                                                                            <option value="RCIP">RCIP</option>
                                                                            <option value="TSIB">TSIB</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!--End col-6-->
                                                            <div class="well" style="margin-top:78px;visibility:hidden">
                                                                <span>Drag File Here</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--End Container-->
                                                </tab>
                                                <tab heading="Contacts"></tab>
                                                <tab heading="Items">
                                                    <div>
                                                        <div class="row clearfix">
                                                            <div class="col-md-12 column" style="margin-top:40px">
                                                                <div class="well">
                                                                    <center>
                                                                        <span>Drag File Here</span>
                                                                    </center>
                                                                </div>
                                                                <div style="overflow: auto;min-height:300px;max-height:300px">
                                                                    <table ng-table class="table" style="width:20em;">
                                                                        <tr ng-repeat="row in fileData.tableData.QBRFQLINE">
                                                                            <td data-title="'ESOURCELINEID'">{{row.ESOURCELINEID}}</td>
                                                                            <td data-title="'QBRFQGROUPCOMBINESIZES'">{{row.QBRFQGROUPCOMBINESIZES}}</td>
                                                                            <td data-title="'QBRFQLINESUPPLIERPARTNUMBER'">{{row.QBRFQLINESUPPLIERPARTNUMBER}}</td>
                                                                            <td data-title="'QBRFQLINESUPPLIERQUOTEEXPIRE'">{{row.QBRFQLINESUPPLIERQUOTEEXPIRE}}</td>
                                                                            <td data-title="'QBRFQLINESUPPLIERQUOTENOTES '">{{row.QBRFQLINESUPPLIERQUOTENOTES}}</td>
                                                                            <td data-title="'QBRFQLINESUPPLIERQUOTEQTY'">{{row.QBRFQLINESUPPLIERQUOTEQTY}}</td>
                                                                            <td data-title="'QBRFQLINESUPPLIERQUOTEUNITPRICE'">{{row.QBRFQLINESUPPLIERQUOTEUNITPRICE}}</td>
                                                                            <td data-title="'QBRFQLINEUID'">{{row.QBRFQLINEUID}}</td>
                                                                        </tr>
                                                                    </table>

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </tab>
                                            </tabset>
                                        </div>
                                        <!--End col-12-->
                                    </div>
                                    <div class="modal-footer">
                                        <input type="submit" class="btn btn-default" ng-click="submitJob()" value="Submit" go-click="#" />
                                        <input type="button" class="btn btn-default" ng-if="true" data-dismiss="modal" value="Exit" go-click="#" popover="Are you sure?" popover-trigger="mouseenter" />
                                    </div>
                                </div>
                            </div>
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
Ekathuwa modal body  via template URL


ngEkathuwa modal show hide

<button ng-click="hideModal()" class="btn btn-danger">Hide Modal</button>
[
    {
        "name": "Alabama",
        "abbr": "AL"
    },
    {
        "name": "Alaska",
        "abbr": "AK"
    },
    {
        "name": "American Samoa",
        "abbr": "AS"
    },
    {
        "name": "Arizona",
        "abbr": "AZ"
    },
    {
        "name": "Arkansas",
        "abbr": "AR"
    },
    {
        "name": "California",
        "abbr": "CA"
    },
    {
        "name": "Colorado",
        "abbr": "CO"
    },
    {
        "name": "Connecticut",
        "abbr": "CT"
    },
    {
        "name": "Delaware",
        "abbr": "DE"
    },
    {
        "name": "District Of Columbia",
        "abbr": "DC"
    },
    {
        "name": "Federated States Of Micronesia",
        "abbr": "FM"
    },
    {
        "name": "Florida",
        "abbr": "FL"
    },
    {
        "name": "Georgia",
        "abbr": "GA"
    },
    {
        "name": "Guam",
        "abbr": "GU"
    },
    {
        "name": "Hawaii",
        "abbr": "HI"
    },
    {
        "name": "Idaho",
        "abbr": "ID"
    },
    {
        "name": "Illinois",
        "abbr": "IL"
    },
    {
        "name": "Indiana",
        "abbr": "IN"
    },
    {
        "name": "Iowa",
        "abbr": "IA"
    },
    {
        "name": "Kansas",
        "abbr": "KS"
    },
    {
        "name": "Kentucky",
        "abbr": "KY"
    },
    {
        "name": "Louisiana",
        "abbr": "LA"
    },
    {
        "name": "Maine",
        "abbr": "ME"
    },
    {
        "name": "Marshall Islands",
        "abbr": "MH"
    },
    {
        "name": "Maryland",
        "abbr": "MD"
    },
    {
        "name": "Massachusetts",
        "abbr": "MA"
    },
    {
        "name": "Michigan",
        "abbr": "MI"
    },
    {
        "name": "Minnesota",
        "abbr": "MN"
    },
    {
        "name": "Mississippi",
        "abbr": "MS"
    },
    {
        "name": "Missouri",
        "abbr": "MO"
    },
    {
        "name": "Montana",
        "abbr": "MT"
    },
    {
        "name": "Nebraska",
        "abbr": "NE"
    },
    {
        "name": "Nevada",
        "abbr": "NV"
    },
    {
        "name": "New Hampshire",
        "abbr": "NH"
    },
    {
        "name": "New Jersey",
        "abbr": "NJ"
    },
    {
        "name": "New Mexico",
        "abbr": "NM"
    },
    {
        "name": "New York",
        "abbr": "NY"
    },
    {
        "name": "North Carolina",
        "abbr": "NC"
    },
    {
        "name": "North Dakota",
        "abbr": "ND"
    },
    {
        "name": "Northern Mariana Islands",
        "abbr": "MP"
    },
    {
        "name": "Ohio",
        "abbr": "OH"
    },
    {
        "name": "Oklahoma",
        "abbr": "OK"
    },
    {
        "name": "Oregon",
        "abbr": "OR"
    },
    {
        "name": "Palau",
        "abbr": "PW"
    },
    {
        "name": "Pennsylvania",
        "abbr": "PA"
    },
    {
        "name": "Puerto Rico",
        "abbr": "PR"
    },
    {
        "name": "Rhode Island",
        "abbr": "RI"
    },
    {
        "name": "South Carolina",
        "abbr": "SC"
    },
    {
        "name": "South Dakota",
        "abbr": "SD"
    },
    {
        "name": "Tennessee",
        "abbr": "TN"
    },
    {
        "name": "Texas",
        "abbr": "TX"
    },
    {
        "name": "Utah",
        "abbr": "UT"
    },
    {
        "name": "Vermont",
        "abbr": "VT"
    },
    {
        "name": "Virgin Islands",
        "abbr": "VI"
    },
    {
        "name": "Virginia",
        "abbr": "VA"
    },
    {
        "name": "Washington",
        "abbr": "WA"
    },
    {
        "name": "West Virginia",
        "abbr": "WV"
    },
    {
        "name": "Wisconsin",
        "abbr": "WI"
    },
    {
        "name": "Wyoming",
        "abbr": "WY"
    }
]
<div class="main-Views well">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <button style="visibility:hidden;margin-top:15px;margin-bottom:15px" type="button" class="btn btn-sm btn-primary">N</button>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th style="font-weight: bold;">Number</th>
                        <th style="font-weight: bold;">Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="currentItem in jobArray" class="pointer no_selection" ng-class="{highlight: currentItem.JobNumber===selectedJob.JobNumber}">
                        <td>{{currentItem.JobNumber}}</td>
                        <td>{{currentItem.JobName}}</td>
                  
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>