JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div data-ng-app="workWithNumbers" data-ng-controller="numbersCtrl">
    <div class="anItem" data-ng-repeat="itm in items">
        <label data-ng-bind="itm.title">Title</label>
        <input type="number" value="{{itm.qty}}" min="0" max="1000" data-ng-model="itm.qty" data-ng-change="setQty()">
    </div>
    <p data-ng-bind-template="Number of baseballs: {{getBaseballs()}}"></p>
    <p data-ng-bind-template="Number of footballs: {{getFootballs()}}"></p>
</div>

JavaScript

var app, numbersCtrl;

app = angular.module('workWithNumbers', []);

numbersCtrl = function($scope) {
  $scope.items = [{"title": "baseball","qty": 2}, {"title": "football","qty": 4}];
  $scope.getBaseballs = function() {
    return $scope.items[0].qty;
  };
  $scope.getFootballs = function() {
    return $scope.items[1].qty;
  };
  return $scope.setQty = function() {
    return this.itm.qty = (this.itm.qty != null) && typeof this.itm.qty === 'number' ? parseInt(this.itm.qty, 10) : 1;
  };
};