title: New to Angular - Computed Variables
body: <p>I am moving to Angular from Knockout, and I have a few issues. I'm assuming that I must be doing something a non-angular type of way.</p>
  
  <p><a href="http://jsfiddle.net/LostInDaJungle/BxELP/">http://jsfiddle.net/LostInDaJungle/BxELP/</a></p>
  
  <pre><code>I linked to jsfiddle so I didn't have to include my code here
  Stack Overflow will not let me post my question without a code block.
  </code></pre>
  
  <p>Here is a very basic fiddle that outlines two of my major problems...</p>
  
  <p>Problem 1: val1 and val2 are initialized as 3 and 4, and add up to 7 properly. However, if you change either of the values in the text boxes, the new value is treated as a string and I get concatenation instead of addition. Change val1 to 4 and you get 44 when it should be 8. What is the best way around this behaviour?</p>
  
  <p>Problem 2: Calculated fields. I can get a calculated field by using the curly brackets like {{val1 + val2}} and have the calculated fields auto update when the underlying model changes, but this is totally unacceptable. In my full fledged app, we generate a "cost" that is used several times throughout and having to put in the cost calculation each and every time is a pain. Not to mention that when this calculation changes, I now have the unenviable task of finding 15 different places that use the cost calculation and updating them all.</p>
  
  <p>In addition, if I try to put an ng-model="cost" on the input with the curly brackets, then the curly brackets don't work. So nothing jumps out at me as a way to bind cost.</p>
  
  <p><a href="http://jsfiddle.net/LostInDaJungle/QNVwe/">http://jsfiddle.net/LostInDaJungle/QNVwe/</a></p>
  
  <p>This example is more like the structure I desire. However, unlike a ko.observable, the calculated fields do not update when the values that generate them change. The boilerplate solution everyone has foisted on me is to write a bunch of ng-change handlers... But that is awful. If width changes change the cost and change the payback calculations, etc... It quickly becomes a tangled mess.</p>
  
  <p>Both of these methods fail as far as separating logic from presentation. Method one has my business logic embedded in my HTML. Method two puts a whole bunch of ng-change handlers in my code which isn't that much different from having to write a whole mess of onChange handlers in plain ol' HTML. If I HAVE to do a bunch of ng-change handlers, I would just as soon do an onChange handler in Javascript because I can at least declare them outside of my presentation layer.</p>
  
  <p>Here's a knockout version of the same:</p>
  
  <p><a href="http://jsfiddle.net/LostInDaJungle/eka4S/2/">http://jsfiddle.net/LostInDaJungle/eka4S/2/</a></p>
  
  <p>This is more like what I would expect... Nothing but data-binds on my inputs, all program logic nicely contained within the view model. Also, since my computable is a Javascript function, I don't have to scratch my head about how to ensure my two values are numeric.</p>
  
  <p>So....</p>
  
  <p>Computed variables: Is there a way to watch the underlying variables and update the computed amount automatically? Without having to bury my program logic in my HTML?</p>
  
  <p>Is there a good way to keep my numbers from turning into strings?</p>
  
  <p>Thank you for your help.</p>
  
  <p>FYI, also posted to Google Groups: <a href="https://groups.google.com/forum/#!topic/angular/0dfnDTaj8tw">https://groups.google.com/forum/#!topic/angular/0dfnDTaj8tw</a></p>