Edit row in angularjs table

See more:

JSON

MVC4

AngularJs

How can I accomplish passing the json data to this view and turning the view into and updating form instead of a create form?

What I have tried:

I have the following angular table with an edit button

<table class="tableData" border="0" cellspacing="0" cellpadding="0">
       <thead>
           <tr>
               <th></th>
               <th>Budget Name</th>
               <th>Year</th>
               <th>Month</th>
              <th></th>
              
           </tr>
       </thead>
        <tbody ng-repeat="(ind,O) in budgetdetails">
            <tr ng-class-even="'even'" ng-class-odd="'odd'">
             
                <td class="CX"><span>+</span></td>
                <td>{{O.budget.BudgetName}}</td>
                <td>{{O.budget.Year}}</td>
                <td>{{O.budget.Month}}</td>
                <td><input type="button" value="Remove" class="btn btn-primary" data-ng-click='removeRow(O)' />
                    <input type="button" value="Edit" class="btn btn-primary" data-ng-click='EditRow(O)' /></td>
              
            </tr>
            <tr class="sub">
                <td></td>
                <td colspan="5">
                    <table class="tableData" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <th>Category</th>
                            <th>SubCategory</th>
                            <th>Amount</th>
                         
                        </tr>
                        <tr ng-repeat="(indx,a) in O.budgetdetails" ng-class-even="'even'" ng-class-odd="'odd'">
                            <td>{{a.Category}}</td>
                            <td>{{a.Subcategory}}</td>
                            <td>{{a.Amount| currency}}</td>
                      
                        </tr>
                @*        <tr>
                <td colspan="2">Total</td>
                <td></td>
                <td>{{Totals().Amount| currency}}</td>
                
            </tr>*@
                    </table>
                </td>
            </tr>
        </tbody>
    </table>

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

$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);

    };

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

@model BudgetPortalMVC4.Models.budget

     @{
    ViewBag.Title = "NewBudget";
    Layout = "~/Views/Shared/_Layout.cshtml";
  
     }
      @Scripts.Render("~/bundles/jquery")
    <script src="../../Scripts/jquery.validate.js" type="text/javascript">  </script>
     <script src="~/Scripts/jquery.validate.unobtrusive.min.js"     type="text/javascript"></script>
    <h2>NewBudget</h2>

@using (Html.BeginForm())
     {
     @Html.ValidationSummary(true)
     <div>

     <table>

    <tr>
    <td>
        <div class="editor-label">
               @Html.LabelFor(model => model.BudgetName)
           </div>
           <div class="editor-field">
               @Html.EditorFor(model => model.BudgetName)
               @Html.ValidationMessageFor(model => model.BudgetName)
           </div>
   </td>
   <td>
    <div class="editor-label">
               @Html.LabelFor(model => model.Year)
           </div>
    <div>
      @Html.DropDownListFor(model => model.Year, BudgetPortalMVC4.Controllers.BudgetController.GetDropDownListForYears())
       @Html.ValidationMessageFor(model => model.Year)
       </div>

   </td>
   <td>
     <div class="editor-label">
               @Html.LabelFor(model => model.Month)
           </div>
   <div>
     @Html.DropDownListFor(model => model.Month, BudgetPortalMVC4.Controllers.BudgetController.GetDropDownListForMonth())
       @Html.ValidationMessageFor(model => model.Month)
       </div>

   </td>

   </tr>

   </table>
   </div>

   <div>

    <h3>Budget Detail</h3>

   <div> <input type="button" id="addbudgetdetail" value="Add row" /></div>

    <div id="new-budgetdetail">

    @Html.EditorForMany(x => x.budgetdetails)


   </div>
     <input type="submit" />


    </div>
    @section Scripts{

   <script type="text/jscript">


   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($('<option></option>').val('').text('Please select')); // Do not give the option a value!
           $.each(data, function (index, item) {
               subCategory.append($('<option></option>').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;
       });

   });



    </script>

     }
    }