Angular: Nested scopes
http://angularjs.org/
Model won't be updated in nested scopes.
HTML
<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<html ng-app>
<body ng-controller="Controller">
<div class="form-group row" style="width: 960px" ng-repeat="dimension in formData.Items track by $index">
<div class="col-md-2 dimension-field">
<label class="dimension-label">Quantity*</label>
<input class="form-control form-input" ng-change="OnChangeDimension(dimension.Quantity,$index,'Quantity')"
name="quantity" ng-required="true" type="text" ng-model="dimension.Quantity" required>
</div>
<div class="col-md-1 col-action add-dimensions">
<label class="dimension-label"></label>
<button type="button" ng-click="addNewDimensionOptions(dimension)" title="Duplicate row"></button>
</div>
</div>
</body>
</html>
JavaScript
function Controller($scope) {debugger;
$scope.formData = {
Items: [{
'ContainerSize': '',
'Packaging': '',
'Quantity': '',
'LengthCm': '',
'WidthCm': '',
'HeightCm': '',
'ItemWeightKg': '',
'TotalWeightKg': ''
}]
}
$scope.addNewDimensionOptions = function (Items) {
$scope.formData.Items.push(Items);
}
}