Angular UI modal not passing ng-model as expected

Question

I have a simple page that is opening a UI Modal on an ng-click

<a class="btn btn-primary" ng-click="vm.open()">Take The Pledge</a>

The 'Controller' for that particular page

vm.open = function (size) {
    $modal.open({
        animation: true,
        templateUrl: '/App/pages/programs/pledgeModal.html',
        controller: 'PledgeCtrl',
        size: size
    });
};

The modal opens the pledgeModal html template, but will not pass the pledge data to the PledgeCtrl

<div class="modal-body">               
    <div class="row">
        <div class="col-md-6">
            <input type="text" class="form-control" placeholder="Enter Name" ng-model="pledge.Name">
        </div>
        <div class="col-md-6">
            <input type="email" class="form-control" placeholder="Enter Email" ng-model="pledge.Email">
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok(pledge)">Submit</button>
</div>

in PledgeCtrl I cannot get the pledge object to get passed

function ok(pledge) {

    $http.post('http://myURL', pledge).
        success(function (data, status, headers, config) {
            $log.info('success');
        }).
        error(function (data, status, headers, config) {                
            $log.debug(data);
        });
}

What am I missing to pass pledge to PledgeCtrl?

Answer 1

First of all, you need to pass pledge from the html

<a class="btn btn-primary" ng-click="vm.open('sm', pledge)">Take The Pledge</a>

then, in the simple page's controller, use resolve

vm.open = function (size, pledge) {
    var modalInstance = $modal.open({
        animation: true,
        templateUrl: '/App/pages/programs/pledgeModal.html',
        controller: 'PledgeCtrl',
        size: size,
        resolve: {
           pledge: function () {
               return pledge;
          }
        }
    });
};

then in the PledgeCtrl

app.controller('PledgeCtrl', ['$scope', '$modalInstance', 'pledge', 
    function ($scope, $modalInstance, pledge)
  ....
  ....

  $scope.ok = function (pledge) {
    $http.post('http://myURL', pledge).
    success(function (data, status, headers, config) {
        $log.info('success');
    }).
    error(function (data, status, headers, config) {                
        $log.debug(data);
    });
  };
]);