How to fill input fields correctly with a preset (and update them) using AngularJS?

Question

Please, check this JSFiddle. When you add a dim preset, it is added correctly to $scope.packData, but it won't fill correctly the input fields. After that if you try to update the $scope.packData directly from the input field, it won't work. It does only from the dim preset. What am I missing here?

Below is the code.

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
  $scope.packData = [{
    length: null,
    width: null,
    height: null
  }];

  $scope.addNewpack = function() {
    $scope.packData.push({
      length: null,
      width: null,
      height: null
    });
  };

  $scope.removepack = function(index) {
    if ($scope.packData.length != 1) {
      $scope.packData.splice(index, 1);
    }
  };

  $scope.dimPresets = [{
    length: 73,
    width: 54,
    height: 45,
    tare: 2
  }, {
    length: 11,
    width: 11,
    height: 11,
    tare: 1
  }, {
    length: 23,
    width: 23,
    height: 23,
    tare: 4
  }, {
    length: 41,
    width: 52,
    height: 63,
    tare: 6
  }];

  $scope.fillLastpack = function(length, width, height, tare) {
    var lastpack = $scope.packData.length - 1;
    $scope.packData[lastpack] = [{
      "length": length,
      "width": width,
      "height": height
    }];
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl" ng-app="myApp">
  <div class="row">
    <div class="col-md-6">
      <div class="form-inline">
        <div class="form-group-sm">
          <fieldset data-ng-repeat="pack in packData" style="padding-bottom:5px;">
            <label class="control-label col-sm-4">Pack {{$index+1}}: </label>
            <input type="number" class="form-control" style="width:80px;" id="length" ng-model="pack.length" name="" placeholder="length">
            <input type="number" class="form-control" style="width:80px;" id="width" ng-model="pack.width" name="" placeholder="width">
            <input type="number" class="form-control" style="width:80px;" id="height" ng-model="pack.height" name="" placeholder="height">
            <button ng-click="removepack($index)" ng-hide="packData.length==1">-</button>
          </fieldset>
        </div>
      </div>
      <div class="form-group-sm" style="padding-top:5px;">
        <span class="col-sm-4"></span>
        <button ng-click="addNewpack()">Add pack</button>
      </div>
      <div>{{packData}}</div>
    </div>

    <div class="col-md-6">
      <div class="form-group-sm">
        <div class="col-sm-6">
          <div class="btn-group-sm" uib-dropdown>
            <span>Add dim: </span>
            <ul>
              <li ng-repeat="preset in dimPresets" ng-click="fillLastpack(preset.length, preset.width, preset.height, preset.tare)">
                <a href="">{{preset.length}}cm x {{preset.width}}cm x {{preset.height}}cm</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Below is the corrected code. In your function fillLastpack() you were pushing an array of object into the packData array instead you just have to push an object.

Updated Fiddle

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
  $scope.packData = [{
    length: null,
    width: null,
    height: null
  }];

  $scope.addNewpack = function() {
    $scope.packData.push({
      length: null,
      width: null,
      height: null
    });
  };

  $scope.removepack = function(index) {
    if ($scope.packData.length != 1) {
      $scope.packData.splice(index, 1);
    }
  };

  $scope.dimPresets = [{
    length: 73,
    width: 54,
    height: 45,
    tare: 2
  }, {
    length: 11,
    width: 11,
    height: 11,
    tare: 1
  }, {
    length: 23,
    width: 23,
    height: 23,
    tare: 4
  }, {
    length: 41,
    width: 52,
    height: 63,
    tare: 6
  }];

  $scope.fillLastpack = function(length, width, height, tare) {
    var lastpack = $scope.packData.length - 1;
    $scope.packData[lastpack] = {
      "length": length,
      "width": width,
      "height": height
    };
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl" ng-app="myApp">
  <div class="row">
    <div class="col-md-6">
      <div class="form-inline">
        <div class="form-group-sm">
          <fieldset data-ng-repeat="pack in packData" style="padding-bottom:5px;">
            <label class="control-label col-sm-4">Pack {{$index+1}}: </label>
            <input type="number" class="form-control" style="width:80px;" id="length" ng-model="pack.length" name="" placeholder="length">
            <input type="number" class="form-control" style="width:80px;" id="width" ng-model="pack.width" name="" placeholder="width">
            <input type="number" class="form-control" style="width:80px;" id="height" ng-model="pack.height" name="" placeholder="height">
            <button ng-click="removepack($index)" ng-hide="packData.length==1">-</button>
          </fieldset>
        </div>
      </div>
      <div class="form-group-sm" style="padding-top:5px;">
        <span class="col-sm-4"></span>
        <button ng-click="addNewpack()">Add pack</button>
      </div>
      <div>{{packData}}</div>
    </div>

    <div class="col-md-6">
      <div class="form-group-sm">
        <div class="col-sm-6">
          <div class="btn-group-sm" uib-dropdown>
            <span>Add dim: </span>
            <ul>
              <li ng-repeat="preset in dimPresets" ng-click="fillLastpack(preset.length, preset.width, preset.height, preset.tare)">
                <a href="">{{preset.length}}cm x {{preset.width}}cm x {{preset.height}}cm</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Hope it helps :)