Click here to Skip to main content
15,308,163 members
Articles / Web Development / HTML5
Technical Blog
Posted 24 Feb 2015


2 bookmarked

Addition of Two Numbers in AngularJS

24 Feb 2015CPOL1 min read
In this blog, we will see how to add two numbers from TextBox and show the result in AngularJS.


Recently, I have started learning AngularJS. AngularJS is a JavaScript Framework, which helps you to declare more HTML Tag Attributes with very powerful functionality.

Let’s Code Something

The first thing, which I tried to do, is to add two numbers and show the result in a TextBox. I coded like below…

<div ng-app="">
    <p>First Number:
        <input type="text" ng-model="a" />
    <p>Second Number:
        <input type="text" ng-model="b" />
    <p>Sum: {{ a + b }}</p>

Couple of Notes

  • The ng-model directive binds the value of the input field to the application variable name. So, the variable "a" will contain first TextBox Value and "b" will contain second TextBox value.
  • {{ expression }} is used to dynamically bind the result of the expression. Thus, while typing on the TextBoxes, this place will populate with the result of the expression, which is our expected summation.

Alright, Let’s See What Happened Next

The following screenshot would tell you what happened after that.

Sum of Two Numbers using TextBoxes

Sum of Two Numbers using TextBoxes

It is actually not adding, but concatenating the numbers. Why this happened? That is because the values inside the TextBoxes are always string. They are not numbers. Thus, “+” operator would help them concatenate.

Looking for Solutions !!!

Now, I researched and found two solutions.

Solution 1 – Using Double Negation

Very beautiful hack. Code as…

<div ng-app="">
    <h3>Using Double Negation</h3>

    <p>First Number:
        <input type="text" ng-model="a" />
    <p>Second Number:
        <input type="text" ng-model="b" />
    <p>Sum: {{ a -- b }}</p>

Solution 2 – Using HTML5 Input Type Number

This is the most preferable way of achieving this task as it uses HTML5 Input Type Number. So, when we use this Number Type, then “+” operator will work because the values are numbers by default.

<div ng-app="">
    <h3>Using Input Type Number</h3>

    <p>First Number:
        <input type="number" ng-model="c" />
    <p>Second Number:
        <input type="number" ng-model="d" />
    <p>Sum: {{ c + d }}</p>

Sum of Two Numbers in AngularJS

Sum of Two Numbers in AngularJS


Going Forward

I hope you liked the blog. Thanks for reading. As I progress and find more interesting stuff, I will share on my future blog posts. Happy coding. :)


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer (Senior)
India India
Proud Indian | Author | TEDx Speaker | Microsoft MVP | CodeProject MVP | Speaker | DZone Most Valuable Blogger| jsfiddler

My Website & Blog

Programming Community Profiles

jsfiddle | Stack Overflow

Social Profiles

Facebook | Twitter | LinkedIn


  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015, 2016, 2017, 2018
  3. Code Project MVP 2014, 2015, 2016
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013

Comments and Discussions

Questionbrowser compatibility Pin
marc borgers3-Mar-15 9:46
Membermarc borgers3-Mar-15 9:46 
AnswerRe: browser compatibility Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)3-Mar-15 20:53
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)3-Mar-15 20:53 
Questiondouble negation Pin
spring197526-Feb-15 8:54
Memberspring197526-Feb-15 8:54 
AnswerRe: double negation Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Feb-15 20:10
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)26-Feb-15 20:10 
AnswerRe: double negation Pin
Furqan Ahmed27-Feb-15 1:44
MemberFurqan Ahmed27-Feb-15 1:44 
GeneralRe: double negation Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)27-Feb-15 3:53
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)27-Feb-15 3:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.