Rails with AngularJS calculations over nested forms - ruby-on-rails

Question

I have a Rails 3.2.8 app in which I'm applying some AngularJS for calculations dynamically within a form.
I have a basic test application which maps an investor to multiple houses and each house has a cost and a value in which I would like to total at the end.
Here is my form
<div ng-controller="InvestorCtrl">
<%= form_for(#investor) do |f| %>
<% if #investor.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#investor.errors.count, "error") %> prohibited this investor from being saved:</h2>
<ul>
<% #investor.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :name %><br />
<%= f.text_field :name %>
</div>
<% i = 0 %>
<%= f.fields_for :houses do |builder| %>
<%= builder.label :address %>
<%= builder.text_field :address %>
<%= builder.label :suburb %>
<%= builder.text_field :suburb %>
<%= builder.label :cost %>
<%= builder.text_field :cost, "ng-model" => "timesheets[#{i}].cost", "ng-change" => "calc_cost()" %>
<%= builder.label :value %>
<%= builder.text_field :value, "ng-model" => "timesheets[#{i}].value" %>
<% i = i + 1 %>
<% end %>
<div class="field">
<%= f.label :total_cost %>
<%= f.number_field :total_cost, "ng-model" => "total_cost" %>
</div>
<div class="field">
<%= f.label :total_value %>
<%= f.number_field :total_value, "ng-model" => "total_value" %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
</div>
Here is the angularjs coffeescript I'm using
$ (event) ->
app = angular.module "investor", []
app.controller("InvestorCtrl", ["$scope", ($scope) ->
$scope.timesheets = [
{ cost: 295000, value: 450000 },
{ cost: 600000, value: 620000 },
{ cost: 1000000, value: 900000 },
]
$scope.calc_cost = ->
total = 0
for ts in $scope.timesheets
total = total + ts.cost
$scope.total_cost = total
$scope.calc_cost()
])
angular.bootstrap document, ['investor']
When I load a new form I'm building three houses in the controller like so:
def new
#investor = Investor.new
3.times { #investor.houses.build }
respond_to do |format|
format.html # new.html.erb
format.json { render json: #investor }
end
end
The total cost is calculated correctly when going to a new form, however when I change any of the houses 'cost' values the 'total_cost' field is set to blank.
Am I binding correctly?
Is there an easier way to bind nested forms using AngularJS with Rails templates?
At the moment I'm just trying to get a sum of houses 'cost' value into the 'total_cost' field using AngularJS.

Answer 1

I managed to find my problem using the great debugging tool called 'batarang'
https://github.com/angular/angularjs-batarang
I just had to parseInt the strings:
total = parseInt(total) + parseInt(ts.cost)

Answer 2

Following (simplified code) is what I would do:
In html:
<input ng-model="cost1"/><br>
<input ng-model="cost2"/><br>
total: {{ total_cost() }}
In controller:
$scope.total_cost = function() {
return $scope.cost1 + $scope.cost2;
}
PS: I do not know how one should ballance between RAILS and angularjs, but I would use ng-repeat for putting 3 forms. I think code would be cleaner in that way.