How to use the same ng-model on multiple elements

Question

Completely new to AngularJS, here. I have a page that will have an undefined amount of input boxes that a user will enter tracking numbers in. There could be only 1, or there could be 10.

I need to obtain the data from each input box. I am currently stuck, in that I can't figure out how to get all of the data from all input boxes; I'm only able to get the data from the first.

HTML

---

<input type="text" class="form-control" ng-model="inBox">
<!-- There are buttons and jQuery that will add another one of the 
     same exact input box above onto this page. There might be as many
     as 15 of these input boxes on the page, and I need the values typed
     into each one. -->
<input type="submit" ng-click="insert()">

AngularJS

---

var app = angular.module("myApp", []);
app.controller("mailroomController", function($scope, $http) {
    $scope.insert = function() {
        alert($scope.inBox);
    };
});

What I've tried: I tried googling, with no luck. I've tried replacing $scope.inBox with $scope.inbox[1] or $scope.inbox[2]. No luck.

What is the best way to obtain each of the data from the input boxes?

UPDATE

---

To obtain the solution I needed, I placed jQuery inside of my AngularJS function. My new AngularJS function looks as follows:

$scope.insert = function() {
    $('.scan-packages').each(function() {
        console.log(this.value);
    });
};

Technically, I've solved this but I did so using jQuery. If anyone wants to translate the above solution into how I would go about obtaining that with pure AngularJS, please feel free to do so so I can use that solution and give you credit for answering the questions.

Answer 1

I don't understand why you need to add input fields via jQuery, doing that you comes out the AngularJS life-cycle...

In AngularJS the view is a projection of the model so, if you want to add more fields, you need to add (in my example) a new object into the fields property of the $scope.

By the way, if you want or need to operate outside from the AngularJS life-cycle, Angular offers to you many way to do that, for example, if jQuery exists, angular recognizes it and decorate it with methods like .scope() (etc.) that give you the ability to access to the model from the view. Note: because you're outside from the AngularJS environment you need to manual trigger the [view-model sync process][1] (this is the reason that i used scope.$apply).

angular
  .module('test', [])
  .controller('TestCtrl', function($scope) {
    var vm = $scope;
  
    vm.fields = [
      {
        name: 'trackId1',
        value: '123xxbb110000'
      },
      {
        name: 'trackId2',
        value: '123xxbb110001'
      },
      {
        name: 'trackId3',
        value: '123xxbb110002'
      },
      {
        name: 'trackId4',
        value: '123xxbb110003'
      }
    ];
  
    vm.addField = function(event) {
      vm.fields.push({
        name: Date.now(),
        value: 'AngularJS'
      });
    };
  })
;

jQuery(document).ready(function($) {
  console.log('ready');
  $('#addFields').click(function() {
      var scope = $('[ng-controller="TestCtrl"]').scope();
      

      
      scope.$apply(function() {
        scope.fields.push({
          trackId: Date.now(),
          value: ''
        });
      });
  });
});

.debug { 
  width: 100%;
  background: lightseagreen;
  padding: 5px 15px;
  margin: .5em 0;
  line-height: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<article ng-app="test">
  <div ng-controller="TestCtrl">
    
    <input ng-repeat="field in fields track by $index" ng-model="field.value" name="{{ field.name }}"/>
    
      
  <div><button ng-click="addField($event)">Add Field Via AngularJS</button></div>  
  <div class="debug" ng-bind="fields | json"></div>
  </div>

</article>

<button id="addFields">Add Fields Via jQuery</button>