title: Edit row in angularjs table
body: <p>I have the following angular table with an edit button</p>
  
  <pre><code>&lt;table class="tableData" border="0" cellspacing="0" cellpadding="0"&gt;
     &lt;thead&gt;
         &lt;tr&gt;
             &lt;th&gt;&lt;/th&gt;
             &lt;th&gt;Budget Name&lt;/th&gt;
             &lt;th&gt;Year&lt;/th&gt;
             &lt;th&gt;Month&lt;/th&gt;
            &lt;th&gt;&lt;/th&gt;
  
         &lt;/tr&gt;
     &lt;/thead&gt;
      &lt;tbody ng-repeat="(ind,O) in budgetdetails"&gt;
          &lt;tr ng-class-even="'even'" ng-class-odd="'odd'"&gt;
  
              &lt;td class="CX"&gt;&lt;span&gt;+&lt;/span&gt;&lt;/td&gt;
              &lt;td&gt;{{O.budget.BudgetName}}&lt;/td&gt;
              &lt;td&gt;{{O.budget.Year}}&lt;/td&gt;
              &lt;td&gt;{{O.budget.Month}}&lt;/td&gt;
              &lt;td&gt;&lt;input type="button" value="Remove" class="btn btn-primary" data-ng-click='removeRow(O)' /&gt;
                  &lt;input type="button" value="Edit" class="btn btn-primary" data-ng-click='EditRow(O)' /&gt;&lt;/td&gt;
  
          &lt;/tr&gt;
          &lt;tr class="sub"&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td colspan="5"&gt;
                  &lt;table class="tableData" border="0" cellspacing="0" cellpadding="0"&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Category&lt;/th&gt;
                          &lt;th&gt;SubCategory&lt;/th&gt;
                          &lt;th&gt;Amount&lt;/th&gt;
  
                      &lt;/tr&gt;
                      &lt;tr ng-repeat="(indx,a) in O.budgetdetails" ng-class-even="'even'" ng-class-odd="'odd'"&gt;
                          &lt;td&gt;{{a.Category}}&lt;/td&gt;
                          &lt;td&gt;{{a.Subcategory}}&lt;/td&gt;
                          &lt;td&gt;{{a.Amount| currency}}&lt;/td&gt;
  
                      &lt;/tr&gt;
              @*        &lt;tr&gt;
              &lt;td colspan="2"&gt;Total&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;{{Totals().Amount| currency}}&lt;/td&gt;
  
          &lt;/tr&gt;*@
                  &lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I want to be able to edit the data when I click on the edit button so far I have been playing with the angular controller and I have this</p>
  
  <pre><code>$scope.EditRow = function (item) {
  
      $scope.budget = item.budget;
      $scope.idBudget = item.budget.idBudget;
      $scope.BudgetName = item.budget.BudgetName;
      $scope.Year = item.budget.Year;
      $scope.Month = item.budget.Month;
  
       resp=BDetail.FindBudgetById(item.budget.idBudget);
  
  };
  </code></pre>
  
  <p>The last line call a json and returns a set of data which I want to send to the page were I create the budgets for editing. Now I am not sure how to send the json to another page and the page that receives it is the View were I create the budgets and it has an IEnumerable editor to repeat the budgets details. Code is as follows</p>
  
  <pre><code>@model BudgetPortalMVC4.Models.budget
  
   @{
  ViewBag.Title = "NewBudget";
  Layout = "~/Views/Shared/_Layout.cshtml";
  
   }
    @Scripts.Render("~/bundles/jquery")
  &lt;script src="../../Scripts/jquery.validate.js" type="text/javascript"&gt;  &lt;/script&gt;
   &lt;script src="~/Scripts/jquery.validate.unobtrusive.min.js"     type="text/javascript"&gt;&lt;/script&gt;
  &lt;h2&gt;NewBudget&lt;/h2&gt;
  
  
  
   @using (Html.BeginForm())
    {
    @Html.ValidationSummary(true) 
    &lt;div&gt;
  
    &lt;table&gt;
  
   &lt;tr&gt;
   &lt;td&gt;
       &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.BudgetName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.BudgetName)
              @Html.ValidationMessageFor(model =&gt; model.BudgetName)
          &lt;/div&gt;
  &lt;/td&gt;
  &lt;td&gt;
   &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Year)
          &lt;/div&gt;
   &lt;div&gt;
     @Html.DropDownListFor(model =&gt; model.Year, BudgetPortalMVC4.Controllers.BudgetController.GetDropDownListForYears())
      @Html.ValidationMessageFor(model =&gt; model.Year)
      &lt;/div&gt;
  
  &lt;/td&gt;
  &lt;td&gt;
    &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Month)
          &lt;/div&gt;
  &lt;div&gt;
    @Html.DropDownListFor(model =&gt; model.Month, BudgetPortalMVC4.Controllers.BudgetController.GetDropDownListForMonth())
      @Html.ValidationMessageFor(model =&gt; model.Month)
      &lt;/div&gt;
  
  &lt;/td&gt;
  
  &lt;/tr&gt;
  
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
  
   &lt;h3&gt;Budget Detail&lt;/h3&gt;
  
  &lt;div&gt; &lt;input type="button" id="addbudgetdetail" value="Add row" /&gt;&lt;/div&gt;
  
   &lt;div id="new-budgetdetail"&gt;
  
   @Html.EditorForMany(x =&gt; x.budgetdetails)
  
  
  &lt;/div&gt;
    &lt;input type="submit" /&gt;
  
  
   &lt;/div&gt;
   @section Scripts{
  
  &lt;script type="text/jscript"&gt;
  
  
  var url = '@Url.Action("GetSubCategories", "Budget")'; // Do not hard code your url's
  $(document).on('change', '.SelectedCategory', function () {
      var subCategory = $(this).closest('.item').find('.SelectedSubCategory');
      subCategory.empty();
      $.getJSON(url, { id: $(this).val() }, function (data) {
          if (!data) {
              return;
          }
          subCategory.append($('&lt;option&gt;&lt;/option&gt;').val('').text('Please select')); // Do not give the option a value!
          $.each(data, function (index, item) {
              subCategory.append($('&lt;option&gt;&lt;/option&gt;').val(item.Value).text(item.Text));
          });
      });
  });
  
  $(function () {
      $('#addbudgetdetail').on('click', function () {
          jQuery.get('@Url.Action("AddBudgetDetail", "Budget")').done(function (html) {
              $('#new-budgetdetail').append(html);
              $('form').data('validator', null);
              $.validator.unobtrusive.parse($('form'));
  
          });
      });
  
      $(".deleteRow").on("click", '', function () {
          $(this).parents("#budgetRow:first").remove();
          return false;
      });
  
  });
  
  
  
   &lt;/script&gt;
  
    }
   }
  </code></pre>
  
  <p><strong>How can I accomplish passing the json data to this view and turning the view into and updating form instead of a create form?</strong></p>