Empty Angular Boostrap fiddl

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 <div ng-controller="MyCtrl">
  <button ng-click="addBloc()">
    Add bloc
  </button>
  <div ng-repeat="bloc in blocs">
    <div>
      <button ng-click="addNewField($index)">
        Add field
      </button>
    </div>
    <div ng-repeat="field in bloc.fields">
      <select ng-model="field.gender">
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
      <input type="text" ng-model="field.FirstName">
      <input type="text" ng-model="field.LastName"> {{field.gender}} {{field.FirstName}} {{field.LastName}}
    </div>
  </div>

</div>

JavaScript

$scope.blocs = [];
  $scope.fields = [];
  $scope.addNewField = function(index) {
  alert(index);
    $scope.blocs[index].fields.push({
      gender: "",
      FirstName: "",
      LastName: ""
    });
  };
  $scope.addBloc = function() {
    $scope.blocs.push({
      fields: []
    });