Angularjs expression is not working for ng-bind and {{ }}

Question

Angularjs addition is not working fro ng-bind and {{ }} but multiplication is working why? I have the following code shown below

single_style.thread = 3;
single_style.stiching = 5;

and:

1) <td>{{single_style.thread + single_style.stiching}} </td>
2) <td>{{single_style.thread * single_style.stiching}}</td>

1) First i getting answer as 35

2) second i getting answer as 15

Even i use ng-bind its also not working why?

Answer 1

Update:

The problem was as suggested, you were trying to add strings which resulted in concatenation, After further reading and this great SO post shown below.

SO Answer

which says

Angular does not use JavaScript's eval() to evaluate expressions. Instead Angular's $parse service processes these expressions.

Angular expressions do not have access to global variables like window, document or location. This restriction is intentional. It prevents accidental access to the global state – a common source of subtle bugs.

So we can't use parseInt in angular brackets, we can either move the calculation inside a javascript function and call it from angular brackets. My Solution is, since (*) multiplication operator is doing type conversion, just multiply the variable by 1 so that you will get the same number and also convert the datatype to number. Then the calculation will be done as expected. Please let me know if this fixes your issue. The html will be as so.

<td>{{single_style.thread*1 + single_style.stiching*1}} </td>

Plunkr Demo

I think in your scenario the variables are strings. The + works as two ways, as an addition operator for numbers and as a concatenation operator for strings, so in your question, the first scenario, the operator is working as a concatenator and appending 3 and 5 as 35, for your second case, I think multiply operator (*) is doing type conversion before performing operation thus the correct calculation takes place (15), whereas in the first case type conversion is not taking place!

<td>{{parseInt(single_style.thread) + parseInt(single_style.stiching)}} </td>
<td>{{parseInt(single_style.thread) * parseInt(single_style.stiching)}}</td>

Answer 2

I think we miss something in your example.

+ operator concatenates strings '3' and '5' when * converts to int and makes multiplication. The same thing will woek for - and /

[EDIT]

Modify your data before you render it:

$scope.all_value = [];
    angular.forEach(data, function(item){       
        item.thread = parseFloat(item.thread);
        item.measure = parseFloat(item.measure);
        item.bulk_qty = parseFloat(item.bulk_qty);
        item.price = parseFloat(item.price);        
        item.pack_charge = parseFloat(item.pack_charge);
        item.label = parseFloat(item.label);
        item.elastic = parseFloat(item.elastic);
        item.button = parseFloat(item.button);         
        item.markt_price = parseFloat(item.markt_price);
        item.stiching = parseFloat(item.stiching);           

        $scope.all_value.push(item);
    })

working example Demo

working example

$scope.single_style ={
  thread: 3,
  stiching: 5
};

and:

<p>{{single_style.thread + single_style.stiching}} </p>
<p>{{single_style.thread * single_style.stiching}}</p> 

Output

8    
15

---

Suppose your case when value is defined as string:

$scope.single_style ={
  thread: '3',
  stiching: '5'
};

and:

<p>{{single_style.thread + single_style.stiching}} </p>
<p>{{single_style.thread * single_style.stiching}}</p> 

Output

35    
15

Solution

The better way is to convert string to int on controller level, a.e.:

$scope.single_style ={
  thread: parseInt('3'),
  stiching: parseInt('5')
};

Demo