AngularJS open modal with specific data from array - angularjs

Question

So, i'm trying to add a modal to a page with a list of clients. When i open the modal i need it to have the data from that specific client.
I was able to do this when opening another pager, sending the id trought the url, but when i need to do this with the modal, i'm not able.
This is the code i have so far:
Note: Without trying to open the specific data from client, everything is working fine.
page.html
<div class="col-md-6 cli--text">
<h3>{{client.name}}</h3>
<p ng-bind-html="client.desc | html"></p>
<a ng-click="clickToOpen({{client.id}})">More</a>
</div>
app.js
myApp.controller('CliCtrl', function ( $scope, $http, $routeParams, modals, ngDialog) {
$scope.get_client = function() {
$http.get("scripts/data/client.json")
.success( function(data) {
$scope.pagedclient = data;
})
.error(function(data) {
alert("Something wrong.");
});
};
$scope.clickToOpen = function (data) {
ngDialog.open({
template: 'scripts/data/modal.html',
closeByDocument: true,
closeByEscape: true
});
function getById(arr, id) {
for (var d = 0, len = arr.length; d < len; d += 1) {
if (arr[d].id === id) {
return arr[d];
}
}
}
$scope.get_client().then(function(){
$scope.clients = getById($scope.detRes,data);
});
$scope.nameclient = clients.name;
};
});
modal.html
<div class="modal--body">
<h2>Modal template</h2>
<h3>{{nameclient}}</h3>
</div>
I'm using this modal plugin, but since i'm new to AngularJS, i don't know exactly what to do.

Answer 1

In the README for the plugin that you are using, it says that you can specify the scope variable that the modal will use. So try modifying your code to something like
ngDialog.open({
template: 'scripts/data/modal.html',
closeByDocument: true,
closeByEscape: true,
scope: $scope
});
This should give your modal access to $scope.nameclient which will allow {{nameclient}} to be evaluated correctly.

Answer 2

You can use resolve function to pass data to your modal template and its controller:
resolve: {
myArray: function passArray() {
return $scope.myArray;
}
}
Check documentation here

Answer 3

The first problem i had was to send the id from the client to the controller. Instead of using ng-click="clickToOpen({{client.id}})" i used it on an id like: id="{{client.id}}. Then i just had to get the value and run the function to filter the client by his ID and send to the modal plugin.
Like #Arafeek said, i had to use his code to complement the function, and the result was this:
$scope.clickToOpen = function (event) {
ngDialog.open({
template: 'scripts/data/modal.html',
scope: $scope
});
$scope.idCli = (event.target.id);
$scope.clients = getById($scope.pagedclient,$scope.idCli);
};
function getById(arr, id) {
for (var d = 0, len = arr.length; d < len; d += 1) {
if (arr[d].id === id) {
return arr[d];
}
}
}
And inside the modal i just access the data normally: {{clients.name}} etc...