angular how to dynamically attach variable inside html

Question

I have a foreach loop using php inside that loop im passing three parameters.

this is my html

<tbody><?php
   foreach($rows as $row):?>
       <tr class="odd gradeA">
            <td><a href="#"><?=$row->firstName?> <?=$row->lastName?></a></td>
            <td><?=$row->address . ' ' . $row->city . ' ' . $row->state . ' ' . $row->zipCode?></td>
            <td><?=$row->email?></td>
            <td><?=$row->cellPhone?></td>
            <td class="text-right tableIcons">
                <a title="Edit User" href="users/edit/<?=$row->userId?>" class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></a>
                <button ng-click="remove(<?=$row->firstName?>, <?=$row->lastName?>, <?=$row->userId?>)" title="Remove User" href="#" class="userRemove btn btn-danger btn-xs"><i class="fa fa-trash"></i></button>
            </td>
       </tr><?php
   endforeach?>
</tbody>

                <!-- begin remove modal -->
            <script type="text/ng-template" id="remove.html">
                <div class="modal-header">
                    <h3 class="modal-title">Are You Sure!</h3>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger m-b-0">
                        <h4><i class="fa fa-info-circle"></i> This can be undone</h4>
                        <p>{{firstName}} would be remove.</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="button" ng-click="confirmRemove()">Remove</button>
                    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
                </div>
            </script>
            <!-- end remove modal -->

when i press the ng-click I want to attach the firstName to the scope

    $scope.remove = function(firstName, lastName, userId){

    $scope.firstName = firstName;

    var modalInstance = $modal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'remove.html',
        controller: function($scope, $modalInstance){
            $scope.cancel = function () {
                $modalInstance.dismiss('cancel');
            };
        }
    })

};

the problem in that the firstName is not getting attach to the remove.html modal. its not showing the firstName in the html.

Answer 1

Modal HTML ::

 <!-- begin remove modal -->
    <script type="text/ng-template" id="remove.html" ng-controller="ModalController">
        <div class="modal-header">
            <h3 class="modal-title">Are You Sure!</h3>
        </div>
        <div class="modal-body">
            <div class="alert alert-danger m-b-0">
                <h4><i class="fa fa-info-circle"></i> This can be undone</h4>
                <p>{{userData.firstName}} {{userData.lastName}} would be remove.</p>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="confirmRemove()">Remove</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>
    <!-- end remove modal -->

Open modal :

  $scope.remove = function (firstName, lastName, userId) {
    $scope.firstName = firstName;
    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'remove.html',
      controller: 'ModalController',
      resolve: {
        userData: {
          "firstName": firstName,
          "lastName": lastName,
          "userId": userId
        }
      }
    })
  };

ModalController :

  angular.module('YOUR_MODULE_NAME').controller('ModalController', ['$scope',
    '$modalInstance',
    'userData',
     function ($scope, $modalInstance, userData) {

      $scope.userData = userData;

      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
  }])

I hope this is complete solution.

Answer 2

you need to specify the controller name in script tag of remove model: Like:

 <!-- begin remove modal -->
        <script type="text/ng-template" id="remove.html" **ng-controller="name of controller where you write remove method code"**>
            <div class="modal-header">
                <h3 class="modal-title">Are You Sure!</h3>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger m-b-0">
                    <h4><i class="fa fa-info-circle"></i> This can be undone</h4>
                    <p>{{firstName}} would be remove.</p>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" ng-click="confirmRemove()">Remove</button>
                <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
            </div>
        </script>
        <!-- end remove modal -->

hope it solve.