JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="ctrl">
<strong class="title">
<i class="red">type="text"</i> VS. <i class="green">type="number"</i> in AngularJS
<hr>
</strong>

<pre>
Add 5 to expression interpolated using input <i>type="text"</i> field:
<input type="text" ng-model="textInput.value">
{{ textInput | json:4 }}
<strong>Result: <span class="result red">{{ textInput.value }} + 5 = {{ textInput.value + 5 }}</span></strong>
<strong>Workaround: <span class="result orange">{{ textInput.value }} * 1 + 5 = {{ textInput.value * 1 + 5 }}</span></strong>



Add 5 to expression interpolated using input <i>type="number"</i> field: 
<input type="number" ng-model="numberInput.value">
{{ numberInput | json:4 }}
<strong>Result: <span class="result green">{{ numberInput.value }} + 5 = {{ numberInput.value + 5 }}</span></strong>
</pre>
</div>

CSS

.title {margin-bottom:30px;display:inline-block;}
i {color: blue;}

.red {color: red;}
.green {color: green;}
.orange {color: orange;}
.result {font-size: 20px}

JavaScript

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
	$scope.textInput = {value: '5'};
  $scope.numberInput = {value: 5};
});