add form fields dynamically on user click using angular js

add child button does not work as suppose to be (should add various fields when user click (first,mi,last name ,student ,and situation fields). details: i am trying to create a form consist of five inputs fields(first name ,middle name , last name and two radio buttons ) and if user click add child button should create a new five inputs fields .

NOTE : i use directive to call this form ).

 <div ng-controller="Step1Ctrl" layout="column" layout-align="center">
 <div layout-gt-sm="row" layout-align="center">
     <div id="banner">
         <p> <span>STEP 1</span> List all household members who are infants,  children, and students up to and including grade 12</p>
    </div>
</div>
<md-content layout-padding>

    <form name="Form">

        <fieldset layout-gt-sm="row" layout-align="center" data-ng-repeat="child in childern">

            <md-input-container class="md-block">
                <label>First Name</label>
                <input required name="firstName" ng-model="child.firstName">
                <div ng-messages="Form.firstName.$error">
                    <div ng-message="required">First Name is required.</div>
                </div>
            </md-input-container>
            <md-input-container class="md-block" style="max-width:60px;">
                <label>MI</label>
                <input required name=" middleName " ng-model="child.middleName ">
                <div ng-messages="Form.middleName.$error ">
                    <div ng-message="required ">Middle Name is required.</div>
                </div>
            </md-input-container>
            <md-input-container class="md-block ">
                <label>Last Name</label>
                <input required name="lastName " ng-model="child.lastName ">
                <div ng-messages="Form.lastName.$error ">
                    <div ng-message="required ">Last Name is required.</div>
                </div>
            </md-input-container>

            <div class="cell ">
                <label> <b>Student?</b></label>
                <div class="box">
                    <md-radio-group ng-model="child.IsStudent">
                        <md-radio-button value="Yes">Yes</md-radio-button>
                        <md-radio-button value="No"> No </md-radio-button>
                    </md-radio-group>
                </div>
            </div>

            <div class="cell">
                <label><b> Child's situation? </b></label>
                <div class="box">
                    <md-radio-group ng-model="child.situation">
                        <md-radio-button value="Foster Child">Foster Child </md-radio-button>
                        <md-radio-button value="HMR"> Homeless, Migrant, Runaway </md-radio-button>
                    </md-radio-group>
                </div>
            </div>
        </fieldset>

    </form>
    <div layout-gt-sm="row" layout-align="center">
        <md-button class="md-raised md-primary" ng-click="Step1Ctrl.addChild()">Add Child</md-button>
    </div>

</md-content>
</div>

javascript

         var form =  angular . module ( 'myform'[ 'ngMaterial','     ngAnimate''ngMessages','ngRoute']);  

      form.directive('myStep1', function () {return { templateUrl: 
  'step1-form.html'};});
      form.controller('Step1Ctrl', function ($scope) {
$scope.childern = [];

$scope.addChild = function () {
    $scope.childern.push({});
};
$scope.removeChild = function () {

};
  });