Display attribute from a JSON in title (angularjs)

Question

Im having problems displaying the Title of a table.

This is where i click to open a "modal" with the details:

<td><a  href="#" ng-click="mostrar_proyecto(z.project_id)">{{z.proyecto}}</a></td>

Here is the modal that opens up with details of said project:

<div id="proyecto_detalle" class="modal" style="display: {{estiloProyecto_detalle}};">
    <div class="modal-content">
        <span class="close" ng-click="close_proyecto_detalle()">&times;</span>
        <h4 align="center">Detalle Tareas</h4>

        <table id="detalleTareas" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <td><b>Tarea</b></td>
                    <td><b>Inicio</b></td>
                    <td><b>Termino</b></td>
                    <td><b>Completado</b></td>
                    <td><b>Esperado</b> </td>
                    <td><b>Responsable</b></td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="y in datos10">
                    <td style="vertical-align: top;">{{y.tarea}}</td>
                    <td style="vertical-align: top;">{{y.inicio}}</td>
                    <td style="vertical-align: top;">{{y.termino}}</td>
                    <td style="vertical-align: top;">{{y.completado}}%</td>
                    <td style="vertical-align: top;">{{y.esperado}}%</td>
                    <td style="vertical-align: top;">{{y.nombre}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

I need to show the name of "z.proyecto" inside the modal in the "h4" where it says "Detalle Tareas". Any tips about how can i do it?

This is my angularjs, where i display the modal, updated with the current changes.

$scope.mostrar_proyecto = function(project_id, proyecto) {

    $http.get("conector.php?tipoDato=query10&project_id="+project_id)
    .then(function(response) {
        $scope.mensajeEspera = "";
        $scope.datos10 = response.data;

         for(var i = 0; i < $scope.datos10.length; i++){
            var currentObj = $scope.datos10[i];
            console.log(currentObj);
            currentObj.tituloObj = currentObj.proyecto;
            $scope.titulo = currentObj.tituloObj;
        currentObj.titulo = currentObj.tituloObj;
        }
        $scope.titulo = currentObj.tituloObj;
    });
    $scope.estiloProyecto_detalle = "block";
}

Answer 1

I think you could update your function mostrar_proyecto like this:

function mostrar_proyecto(id){
   //...your previous code

   //update

   //...retrieve project data: z.proyecto and bind it
   $scope.title = z.proyecto; //or your specific data (titulo de la tarea, detalles, or any other)
}

and now in your modal just bind the h4 to that var like this:

<h4 align="center" data-ng-bind="title"></h4>