I was using a bootstrap template, but as it was patchy (they had not paid) the company bought another bootstrap.
But the way I rode the mode before does not work anymore. I can not open the template template with the data I need for editing.
From the photo, you can see that I have 2 buttons that call the modal EDIT on the right side and below the other datatable. I need to click the EDIT and load the data as the photo, but that is not what happens, when I click EDIT it does not open anything, but when I click on the OPEN DIALOG it opens the modal and with the editions that I need.
Follow print: 
Myjsp:
<!--rowAdicionarnovasfuncionalidadesaqui--><divclass="row">
<!-- row -->
<div class="row">
<!-- NEW WIDGET START -->
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget jarviswidget-color-darken" id="wid-id-0"
data-widget-editbutton="true"
data-widget-colorbutton="true"
data-widget-editbutton="true"
data-widget-togglebutton="true"
data-widget-deletebutton="true"
data-widget-fullscreenbutton="true"
data-widget-custombutton="true"
data-widget-collapsed="false"
data-widget-sortable="true">
<!-- widget options:
usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
data-widget-colorbutton="false"
data-widget-editbutton="false"
data-widget-togglebutton="false"
data-widget-deletebutton="false"
data-widget-fullscreenbutton="false"
data-widget-custombutton="false"
data-widget-collapsed="true"
data-widget-sortable="false"
-->
<header>
<span class="widget-icon"> <i class="fa fa-table"></i> </span>
<h2>Standard Data Tables </h2>
</header>
<!-- widget div-->
<div>
<!-- widget edit box -->
<div class="jarviswidget-editbox">
<!-- This area used as dropdown edit box -->
</div>
<!-- end widget edit box -->
<!-- widget content -->
<div class="widget-body no-padding">
<table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th>Nome do Responsável</th>
<th>Telefone Contato</th>
<th>Celular</th>
<th>E-mail</th>
<th>Editar</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in organizacoes">
<td><span ng-bind="x.nomeResponsavel" /></td>
<td><span ng-bind="x.telefone" /></td>
<td><span ng-bind="x.celular" /></td>
<td><span ng-bind="x.emailResponsavel" /></td>
<td><button type="submit" id="dialog_link" class="btn btn-info" ng-click="setSelected(x);" />Editar</button></td>
</tr>
</tbody>
</table>
</div>
<!-- end widget content -->
</div>
<!-- end widget div -->
</div>
<!-- end widget -->
</div>
<!-- end row -->
<!-- INICIO DIALOG -->
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="well well-sm well-light">
<a href="#" id="dialog_link" class="btn btn-info"> Open Dialog </a>
</div>
</div>
</div>
<!-- ui-dialog -->
<div id="dialog_simple" title="Dialog Simple Title">
<p>
<!-- START MODAL -->
<form name="form" id="form_sample_2" role="form"
class="form-horizontal ng-pristine ng-valid" novalidate>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Nome:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="text"
ng-model="organizacoesSelecionada.nomeResponsavel"
class="form-control" id="nomeResponsavel" maxlength="100"
name="nomeResponsavel" required> <span
style="color: red"
ng-show="submitted && form.nomeResponsavel.$error.required">Campo
Nome Responsável Obrigatório.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Telefone:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="text" ng-model="organizacoesSelecionada.telefone"
mask="(11) 9999-9999"
class="form-control" id="telefone" maxlength="100"
name="telefone" required> <span style="color: red"
ng-show="submitted && form.telefone.$error.required">Campo
Telefone Obrigatório.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Celular:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="text" ng-model="organizacoesSelecionada.celular"
mask="(99) 9?9999-9999"
class="form-control" id="celular" maxlength="100"
name="celular" required> <span style="color: red"
ng-show="submitted && form.celular.$error.required">Campo
Celular Obrigatório.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">E-mail:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="email"
ng-model="organizacoesSelecionada.emailResponsavel"
class="form-control" id="emailResponsavel" maxlength="100"
name="emailResponsavel" required> <span
style="color: red"
ng-show="submitted && form.emailResponsavel.$error.required">Campo
E-mail Obrigatório.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">ID:<span
class="required" aria-required="true"> * </span></label>
<div class="col-md-9">
<input type="text"
ng-model="organizacoesSelecionada.idEscritorioContabil"
class="form-control" id="idEscritorioContabil" maxlength="100"
name="idEscritorioContabil" disabled> <span
style="color: red"
ng-show="submitted && form.idEscritorioContabil.$error.required">Campo
ID Obrigatório.</span>
</div>
</div>
</div>
</form>
</p>
</div>
<!-- FIM DIALOG -->
</section>
<!-- end widget grid -->
My .js:
angular.module('BoxApp').controller("ResponsavelOrganizacao", function($scope, $http) {
$scope.organizacoes = {};
$scope.organizacoesSelecionada = {};
$scope.iniciar = function() {
$http.get('http://localhost:8080/boxmlV2/cadresponsavelorganizacao').success(function(response) {
$scope.organizacoes = response;
});
};
$scope.iniciar();
$scope.setSelected = function(selecao){
$scope.organizacoesSelecionada = selecao;
};
/**
* Trecho para validar o form ao submeter.
*/
$scope.submitted = false;
$scope.submitForm = function(form) {
$scope.submitted = true;
if (form.$valid) {
$scope.editaResponsavelOrganizacao();
}
};
$scope.editaResponsavelOrganizacao = function() {
var str = telefone.value;
telefone.value = str.replace(/[^a-zA-Z0-9]/g, '');
str = celular.value;
celular.value = str.replace(/[^a-zA-Z0-9]/g, '');
$http.post('/boxmlV2/cadresponsavelorganizacao/salvar', {
idEscritorioContabil : idEscritorioContabil.value,
nomeResponsavel : nomeResponsavel.value,
telefone : telefone.value,
celular : celular.value,
emailResponsavel : emailResponsavel.value
}).then(function(response) {
$scope.sucesso();
}, function(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
$scope.sucesso = function() {
$scope.closeMyPopup();
$scope.iniciar();
nomeResponsavel.value = "";
telefone.value = "";
celular.value = "";
emailResponsavel.value = "";
};
$scope.closeMyPopup = function() {
$(myModal_autocomplete).modal('hide');
};
});
Page script tag:
/*
* DIALOG SIMPLE
*/
// Dialog click
$('#dialog_link').click(function() {
$('#dialog_simple').dialog('open');
return false;
});
$('#dialog_simple').dialog({
autoOpen : false,
width : 500,
resizable : false,
modal : true,
title : "Cadastro Responsável Organização",
buttons : [{
html : "<i class='.btn .btn-xs'></i> Salvar",
"class" : "btn btn bg-color-blueLight txt-color-white",
click : function() {
$(this).dialog("close");
}
}, {
html : "<i class='.btn .btn-xs'></i> Cancelar",
"class" : "btn bg-color-red txt-color-white",
click : function() {
$(this).dialog("close");
}
}]
});