angularjs - angularjs 動的フォーム フィールド未定義スコープ

Question

こんにちは、動的フォームフィールドを追加するためにこれを行いました

    <div ng-repeat="wspVdcMuniTbl in wspVdcMuniTbls">
        <div class="col-sm-5">
            <label>VDC/Municipalities</label>
            <select 
              ng-model="wspVdcMuniTbl.tbl_vdc_municipality_id[$index]" 
              options="municipalities"
              ng-options="municipality.id as municipality.name for municipality in municipalities">
            </select>
        </div>

        <div class="col-sm-5">
            <label>Wards</label>
            <input type="text"
                ng-model="wspVdcMuniTbl.wards[$index]"
                id="Location">
        </div>

        <div class="col-sm-2">
            <label>&nbsp;</label>
            <button ng-hide="$first" ng-click="removeServiceArea($index)">-</button>
        </div>

</div>

<div class="col-sm-2">
 <button ng-click="addServiceArea()">+</button>

そして私のjs部分は

$scope.wspVdcMuniTbls = [{}];  
  $scope.addServiceArea = function(){        
        $scope.wspVdcMuniTbls.push({});
    }

    $scope.removeServiceArea = function(index){
        $scope.wspVdcMuniTbls.splice(index,1);
    }

ここで動的フォームフィールドを追加すると正常に機能しますが、送信後 console.log($scope.wspVdcMuniTbl) が未定義です何が問題になるのか助けてください