How do you bind data from an html input tag to a javascript object using AngularJS?

I'm really new to using AngularJS and so I'm not quite sure what the best way to accomplish my goal is. What I want to do is have a grid of input tags with type=number in my hmtl and have it set so that whenever the value is incremented, a new object is appended to a list. Likewise, when it is decremented (it cannot go below 0), an object of that type is removed from the list.

With this code, whenever I increment the input box, that change is displayed at the bottom by the {{}}. However, it's not clear to me what I'm actually binding to. I don't know how to make a new foo1 object whenever the user increments the input box.

Here's my code:

var app = angular.module('FooTools', ['ionic'])

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });


})

app.controller('fooCtrl', function($scope) {
 //I want to bind foo objects to these lists
    $scope.foo1 = [];
 $scope.foo2 = [];
});
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 <title></title>

 <link href="lib/ionic/css/ionic.css" rel="stylesheet">
 <link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
 <script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
 <script src="cordova.js"></script>

    <!-- your app's js -->
 <script src="js/app.js"></script>
 <script src="js/foo.js"></script>
</head>

<body ng-app="FooTools">
 <ion-pane>
  <ion-header-bar class="bar-positive">
   <h1 class="title"><b>Foo Tools</b></h1>
  </ion-header-bar>
  <ion-content>
   <div class="main-div">
    <div ng-controller="fooCtrl"><br>
     <div class="row">
      <div class="col">
       Column 1:
      </div>
      <div class="col">
       Column 2:
      </div>
     </div>
     <div class="row">
      <div class="col">
       <label class="item-input">
        object1:&nbsp;  <input type="number" ng-model="foo1"><br>
       </label>
      </div>
      <div class="col">
       <label class="item-input">
        object2:&nbsp;  <input type="number" ng-model="foo2"><br>
       </label>
      </div>
     </div>
     Foo: {{foo1 + " foo1, " + foo2 + " foo2"}}
    </div>
   </div>
  </ion-content>
 </ion-pane>
</body>
</html>

Also, here's my foo1 object constructor if that helps:

function unit(value) {
this.value = value;
}

Does anyone know how to do this or have a better idea for how to accomplish this? (Not that this makes a difference, but this is an Ionic project.)

What about binding "ng-change" to the input? For example:

<input type="number" ng-change="checkValues("foo1", fooN1)" ng-model="fooN1">
<input type="number" ng-change="checkValues("foo2", fooN2)" ng-model="fooN2">

And inside your controller

$scope.checkValues = function (a, b) {
  if (a in $scope) {
    if ($scope[a].length < b) { // If length is smaller that the number
      $scope[a].push({}); //Adds the new object to the array
    } else {
      //Removes the last element of the array
      $scope[a].pop();
    }
  }
}

Hope this helps

I'm not sure I fully understood what you're trying to accomplish here, but try the following fix (based on what I've understood so far):

//in your DOM
<label class="item-input">
    object1:     <input type="number" ng-model="data.foo1">
                     <button ng-click="addToList(data.foo1)"> + </button>
                     <button ng-click="removeFromList(data.foo1)"> - </button>
</label>

//in your controller
//initialize data
$scope.data=[{foo1:0, foo2:0}];
//func to add obj to list when the value incremented
$scope.addToList = function (obj){
     $scope.data.foo1 ++;
     $scope.foo1List.push(obj);//add to your foo1 list
}
$scope.removeFromList = function (obj){
     $scope.data.foo1 --;
     // you can use $scope.foo1List.splice to remove from your array list
}

hope this helps!