how to pass MVC model to a UI-bootstrap modal

Question

I am trying to use a Angular/bootstrap modal to edit MVC ApplicationUser scaffolded views. I have a found a few examples, they are mostly jquery. I found one that works well using jquery-ui. I want to be consistent with my modals so I need to make it work with angular-ui or plain bootstrap. I am not sure how this is calling the MVC controller for the data binding.

Working Jquery-ui example

<script type="text/javascript">
$(document).ready(function () {
    $.ajaxSetup({ cache: false });
    $(".editDialog").live("click", function (e) {
        var url = $(this).attr('href');
        $("#dialog-edit").dialog({
            title: 'Edit Customer',
            autoOpen: false,
            resizable: false,
            height: 355,
            width: 400,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            open: function (event, ui) {
                $(this).load(url);
            },
        });
        $("#dialog-edit").dialog('open');
        return false;
    });
});

 <tbody>
    @foreach (var item in Model)
        {
      <tr>
       <td>
        @Html.DisplayFor(modelItem => item.FullName)
        </td>
       <td>
    @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "editDialog" })|
      @Html.ActionLink("Details", "Details", new { id = item.Id }) |
     </td>
     </tr>
       }
      </tbody>

 <div id="dialog-edit" style="display: none"> </div>

Here is how I use angular to open a modal with a api call.

 $scope.editLocation = function (id) {
        $scope.close();
        var deferred = $q.defer();
        $http({ method: 'get', url: '/api/Locations/' + id })
                .success(function (model) {
                    deferred.resolve(model);
                    $scope.model = model;
                }).error(function (error) {
                    deferred.reject(error);
                }).then(function () {
                    $modal.open({
                        templateUrl: "EditLocationModal.html",
                        controller: 'ModalInstanceController',
                        resolve: {
                            model: function () {
                                return $scope.model;
                            }
                        }
                    });
                })
        return deferred.promise;
    }

UPDATE

$scope.editUser = function (id) {

            $modal.open({
                templateUrl: "Modals/ApplicationUserModal.html",
                controller: 'ModalInstanceController',
                resolve: {
                    model: function () {
                        return $scope.model;
                    }
                }
            });
        };

View

 <div class="card-body card-padding" ng-controller="ApplicationUserController">
  <div class="table-responsive">
    <table class="table table-striped table-vmiddle">
      <thead>
       <tr>
         <th>Full Name</th>
       </tr>
      </thead>
      <tbody>
         @foreach (var item in Model)
             {
               <tr>
                <td>
                 @Html.DisplayFor(modelItem => item.FullName)
                </td>
                <td>
                @Html.ActionLink("Edit", "Edit", null, new { ng_click = "editUser(item.Id)" })
                </td>
               </tr>
             }
      </tbody>
     </table>
    </div>
  </div>

UPDATE 2 This syntax

 @Html.ActionLink("Edit", "Edit", null, new { ng_click = "editUser(" + item.Id + ")" })

is throwing this error.

Error: [$parse:syntax] Syntax Error: Token 'bc05f5' is unexpected, expecting [)] at column 12 of the expression [editUser(87bc05f5-35c2-4278-a528-b7e237922d4e)] starting at [bc05f5-35c2-4278-a528-b7e237922d4e)]. http://errors.angularjs.org/1.3.15/$parse/syntax?p0=bc05f5&p1=is%20unexpected%2C%20expecting%20%5B)%5D&p2=12&p3=editUser(87bc05f5-35c2-4278-a528-b7e237922d4e)&p4=bc05f5-35c2-4278-a528-b7e237922d4e)

Answer 1

I am not sure how this is calling the MVC controller for the data binding.

Just to clue you in on the interesting parts

// 1. here it binds a "click" event to all elements with class "editDialog"
$(".editDialog").live("click", function (e) { 
    // 2. here it fetches the HREF attribute of that element
    var url = $(this).attr('href');
    $("#dialog-edit").dialog({
        title: 'Edit Customer',
        autoOpen: false,
        resizable: false,
        height: 355,
        width: 400,
        show: { effect: 'drop', direction: "up" },
        modal: true,
        draggable: true,
        open: function (event, ui) {
            // 3. And here it loads that HREF attribute in the modal
            $(this).load(url);
        },
    });
    $("#dialog-edit").dialog('open');
    return false;
});

That's basically all of the "data binding" going on in the jquery version. As you can see it's really not anything fancy.

You'd probably like to do something more elegant, like setting up an angular directive for your editDialog or somesuch.

EDIT:
I re-read how you init your modal and if I understood everything correctly you should be able to do something like this (not razor-savvy enough to be 100% on the syntax but you get the idea)

@Html.ActionLink("Edit", "Edit", 
   new { id = item.Id }, 
   new { ng_click = "editUser('" + @item.Id + "')" })

Also, you might or might not need to scope editUser inside ng-click.