<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container" ng-app="myModule" id="spocontainer"> <div class="row" id="app1"> <div class="col-xs-12 col-md-8"> <div class="panel panel-default"> <div class="panel-heading"> <label id="ApprovalHeader"></label> </div> <div class="panel-body"> <div ng-controller="myController"> <div ng-repeat="item in items"> <div id="msgs"></div> <p> <strong>Sys ID :</strong> {{item.sys_id}}<br /> <strong>Requested By :</strong> {{item.requested_by.display_value}}<br /> <strong>Planned start date :</strong> {{item.start_date}}<br /> <strong>Planned End date :</strong>{{item.end_date}}<br /> <br /> <strong> <a data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Options <i class="fa fa-chevron-up pull-left"></i> <i class="fa fa-chevron-down pull-left"></i> </a> </strong> <div class="collapse" id="collapseExample"> <div class="row"> <div class="col-xs-4"> <strong>State : </strong>{{item.state}}<br /> <strong>Requested By : </strong>{{item.requested_by.display_value}}<br /> <strong>Type : </strong>{{item.type}}<br /> <strong>Category : </strong>{{item.category}}<br /> <strong>Risk : </strong>{{item.risk}}<br /> <strong>Priority : </strong>{{item.priority}}<br /> <strong>Assignment group : </strong>{{item.assignment_group.display_value}}<br /> <label id="docapprover" value="{{item.document_id.link.slice(-32)}},{{item.approver.link.slice(-32)}}" visible="false"></label> </div> <div class="col-xs-4"> <strong>Approval : </strong>{{item.approval}}<br /> <strong>Created : </strong>{{item.sys_created_on}}<br /> <strong>Subtype : </strong>{{item.u_subtype}}<br /> <strong>Business Unit : </strong>{{item.u_business_unit}}<br /> <strong>Urgency : ??? </strong> <br /> <strong>Requested By Date :</strong> {{item.requested_by_date}}<br /> </div> </div> </div> </p> </div> </div> <br /> <div ng-controller="myController2"> <strong> <a data-toggle="collapse" href="#collapseFiles" aria-expanded="false" aria-controls="collapseFiles">Files <i class="fa fa-chevron-up pull-left"></i> <i class="fa fa-chevron-down pull-left"></i> </a> </strong> <div class="collapse" id="collapseFiles"> <div class="row"> <div class="col-xs-8"> <div ng-repeat="file in files"> <strong><a target="_blank" href="{{file.download_link}}">{{file.file_name}}</a></strong> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-xs-12 col-md-4"> <div class="panel panel-default"> <div class="panel-heading panel-heading-custom"> This Change Request needs your approval </div> <div class="panel-body"> <div class="form-group"> <label for="comment">Comment:</label> <textarea class="form-control" rows="5" id="comment"></textarea> </div> <button id="btn1" type="button" class="btn btn-success btn-sm" onclick="Approve(this)">Approve</button> <button id="btn2" type="button" class="btn btn-danger btn-sm" onclick="Reject(this);">Reject</button> <br /> <br /> </div> </div> </div> </div> </div>