ng-model not being properly set when using ng-repeat

Question

Ok, I am having an issue and I'm now starting to pull my hair out. Essentially I am creating an app using angular and ionic that has a multitude of different formulas. So I have anywhere from 1-6 input fields and 1-4 solution fields. Originally my plan was to create a service that would create the html for me and my controller could then inject it into the html template. But this requires using $compile and I've read that the controller should never create html but instead only modify.

So my only option that I could find was using ng-repeat to the last of creating each input field. This method should work great as it can allow me to create an entire page by simply setting scopes inside the controller. Nice, clean and efficient. But life isn't that simple.

My biggest issue seems to be setting the ng-model and the ng-change event. Originally my html was similar to this:

<div class="row"><div class="col col-10"></div><div class="col col-90">
        <label class="item item-input">
         <span class="input-label">Length (feet):</span>
         <input type="number" id="variable1" ng-model="variable1" ng-change="calcExcavation();"  />
        </label>
      </div></div><!--End class col-90 and class row-->

      <div class="row"><div class="col col-10"></div><div class="col col-90">
        <label class="item item-input">
         <span class="input-label">Width (feet):</span>
         <input type="number" id="variable2" ng-model="variable2" ng-change="calcExcavation();">
        </label>
      </div></div><!--End class col-90 and class row-->

      <div class="row"><div class="col col-10"></div><div class="col col-90">
        <label class="item item-input">
         <span class="input-label">Depth (inches):</span>
         <input type="number" id="variable3" ng-model="variable3" ng-change="calcExcavation();">
        </label>
      </div></div><!--End class col-90 and class row-->

But that requires creating a single html page for each formula, so I wanted to utilize a general template and ng-repeat. That brought me to:

<div class="row" ng-repeat="x in variableArray"><div class="col col-10"></div><div class="col col-90">
    <label class="item item-input">
     <span class="input-label">{{x.label}}</span>
     <input type="number" id="{{x.name}}" ng-model="{{x.name}}" ng-change="{{x.onChangeFunction}}"  />
    </label>
  </div></div><!--End class col-90 and class row-->

But when the ng-model utilizes the double curly x.name, it doesn't repeat the fields. So searching other examples I found that the ng model didn't need the curly braces and instead just need the x.name. So I tried it and not it's repeating correctly! So to make sure my values were getting passed in correctly I created an alert that displayed the values. Punched in a 5, it instantly alerted me to change and told me the value. So I went to the next field and nothing. So thinking I was doing something wrong, I placed a simple alert before my alert that displayed my variables. Here is what I found.

Changing the value in the first field will bring up the simple alert and the number alert showing the value I just entered. But when I change the number on the second field, the simple alert will display but the number alert simply doesn't!!

I'm so close I can taste it, please tell me what I'm doing wrong??

 .controller('ExcavationCtrl', function($scope, $compile, Contractor, FormBuilder) {

  $scope.viewTitle = "Contractors Calc";
  $scope.formulaName = "Excavation";
  $scope.formulaImageSquare = "./img/excavatorSquare.png";
  $scope.formulaDescription = "This program estimates the quantity of cubic yards that will have to be removed to provide an excavation of a given size. The program asks for the length and width in feet, and the thickness in inches of the area to be excavated.";

  $scope.variableArray = [ 
    {name: 'variable1', label:'Length', units:'(feet)', onChangeFunction:'calcExcavation()'}, 
    {name: 'variable2', label:'Width', units:'(feet)', onChangeFunction:'calcExcavation()'}, 
    {name: 'variable3', label:'Thickness', units:'(inches)', onChangeFunction:'calcExcavation()'}
  ];


  //$scope.showResults('excavation');

  $scope.calcExcavation = function() {
    alert('Got inside calcExcation');
    alert('Got into calcExcation formula inside the ExcavationCtrl. Variable1: '+variable1.value+', '+variable2.value+', '+variable3.value);
    $scope.variable2 = 5;
    $scope.variable3 = 9;
    //document.getElementById('solution').innerHTML = Contractor.formulaExcavate(variable1.value, variable2.value, variable3.value);
  }//end scope calcExcavation
})

    <h3>Repeated</h3>
      <div class="row" ng-repeat="x in variableArray"><div class="col col-10"></div><div class="col col-90">
        <label class="item item-input">
         <span class="input-label">{{x.label}}</span>
         <input type="number" id="{{x.name}}" ng-model="x.name" ng-change="{{x.onChangeFunction}}"  />
        </label>
      </div></div><!--End class col-90 and class row-->