title: how to pass MVC model to a UI-bootstrap modal
body: <p>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.</p>
  
  <p>Working Jquery-ui example</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(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;
      });
  });
  </code></pre>
  
  <p></p>
  
  <pre><code> &lt;tbody&gt;
      @foreach (var item in Model)
          {
        &lt;tr&gt;
         &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.FullName)
          &lt;/td&gt;
         &lt;td&gt;
      @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "editDialog" })|
        @Html.ActionLink("Details", "Details", new { id = item.Id }) |
       &lt;/td&gt;
       &lt;/tr&gt;
         }
        &lt;/tbody&gt;
  
   &lt;div id="dialog-edit" style="display: none"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>Here is how I use angular to open a modal with a api call. </p>
  
  <pre><code> $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;
      }
  </code></pre>
  
  <p>UPDATE</p>
  
  <pre><code>$scope.editUser = function (id) {
  
              $modal.open({
                  templateUrl: "Modals/ApplicationUserModal.html",
                  controller: 'ModalInstanceController',
                  resolve: {
                      model: function () {
                          return $scope.model;
                      }
                  }
              });
          };
  </code></pre>
  
  <p>View</p>
  
  <pre><code> &lt;div class="card-body card-padding" ng-controller="ApplicationUserController"&gt;
    &lt;div class="table-responsive"&gt;
      &lt;table class="table table-striped table-vmiddle"&gt;
        &lt;thead&gt;
         &lt;tr&gt;
           &lt;th&gt;Full Name&lt;/th&gt;
         &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
           @foreach (var item in Model)
               {
                 &lt;tr&gt;
                  &lt;td&gt;
                   @Html.DisplayFor(modelItem =&gt; item.FullName)
                  &lt;/td&gt;
                  &lt;td&gt;
                  @Html.ActionLink("Edit", "Edit", null, new { ng_click = "editUser(item.Id)" })
                  &lt;/td&gt;
                 &lt;/tr&gt;
               }
        &lt;/tbody&gt;
       &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>UPDATE 2
  This syntax </p>
  
  <pre><code> @Html.ActionLink("Edit", "Edit", null, new { ng_click = "editUser(" + item.Id + ")" })
  </code></pre>
  
  <p>is throwing this error.</p>
  
  <blockquote>
    <p>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)].
    <a href="http://errors.angularjs.org/1.3.15/" rel="nofollow">http://errors.angularjs.org/1.3.15/</a>$parse/syntax?p0=bc05f5&amp;p1=is%20unexpected%2C%20expecting%20%5B)%5D&amp;p2=12&amp;p3=editUser(87bc05f5-35c2-4278-a528-b7e237922d4e)&amp;p4=bc05f5-35c2-4278-a528-b7e237922d4e)</p>
  </blockquote>