title: How to bind a calculated value to ng-model field in Angular.js so that I can save the full form details in database using Ruby on Rails
body: <p>I am new to Angular.JS and don't know how to communicate between Rails and Angular.js. I am creating a form for generating invoices and storing them in database. I am <strong>unable to store calculated data</strong> in the database on form submit.</p>
  
  <p>In below example, I am <strong>calculating polish</strong> using  <strong>calculatePolishPercentage</strong> function.</p>
  
  <p><strong>Issue 1:</strong> The calculatePolishPercentage is working properly, but I am unable to save this calculated value in the database.</p>
  
  <p><strong>Issue 2:</strong> How to create dynamic product fields in the invoice form so that I can store multiple products under one invoice?</p>
  
  <p>I don't understand how to store these calculated values to the database on form submit.</p>
  
  <p>I think rails is working fine, the issue is in the form as I am not able to bind calculated values with the form submit function.</p>
  
  <p>bills.js.coffee file:</p>
  
  <pre><code>app = angular.module("Invoicing", ["ngResource"])
  @BillsCtrl = ($scope, $resource) -&gt;
      Bill = $resource("/invoices/:id", {id: "@id"})
      $scope.currencySymbol = "Rs"
      $scope.invoices = Bill.query()
  
      Customer = $resource("/users/:id", {id: "@id"})
      $scope.customers = Customer.query()
  
      $scope.calculatePolishPercentage = (polish) -&gt;
          (polish / 100)
  
      $scope.createInvoice = -&gt;
         bill = Bill.save($scope.newInvoice)
         $scope.invoices.push(bill)
         $scope.newInvoice = {}
  </code></pre>
  
  <p>bills/index.html.erb</p>
  
  <pre><code>&lt;div ng-controller="BillsCtrl"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;th&gt;Customer Name&lt;/th&gt;
                  &lt;th&gt;Product Name&lt;/th&gt;
                  &lt;th&gt;Description&lt;/th&gt;
                  &lt;th&gt;Polish in %age&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;form ng-submit="createInvoice()"&gt;
                  &lt;td&gt;&lt;select ng-model="newInvoice.user_id" ng-options="customer as customer.name for customer in customers track by customer.id"&gt;&lt;/select&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" ng-model="newInvoice.product"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" ng-model="newInvoice.description"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="number" step="0.01" ng-model="newInvoice.polish" value="{{calculatePolishPercentage(newInvoice.polish}}"&gt;{{calculatePolishPercentage(newInvoice.polish}}&lt;/td&gt;
                  &lt;td&gt;&lt;input type="submit" value="Generate Bill"&gt;&lt;td&gt;
              &lt;/form&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Invoices Controller in Rails:</p>
  
  <pre><code>class InvoicesController &lt; ApplicationController
      respond_to :json
  
      def index
          @invoices = Invoice.all
          render json: @invoices
      end
  
      def create
          @invoice = Invoice.create(invoice_params)
          render json: @invoice
      end
  
      def show
          @invoice = Invoice.find(params[:id])
          render json: @invoice
      end
  
      private
  
      def invoice_params
          params.require(:invoice).permit(:user_id, :product, :description, :polish )
      end
  end
  </code></pre>
  
  <p>Rails Routes:</p>
  
  <pre><code>resources :users
    get 'users/index'
    get 'users/new'
    get 'users/edit'
    get 'users/delete'
  
    resources :invoices
    get 'bills/index'
  </code></pre>