My ng-repeat isn't working ):

I have a problem with my ng-repeat. I am working in a project and i'm designing a gradecontrol system. I have a form that when the user clicks in the button, it adds the $scope.grade to an array. In the table below, it was supposed to show the array. But it isn't showing :/ Can anybody help me? Thanks!

    <div class="container">
    <h2>Controle de Notas:</h2>
    <form role="form">
        <div class="form-group">
            <label for="inputNameSubject"> Subject's Name</label>
            <input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
            <p>{{grade.name}}</p>
        </div>
        <div class="form-group">
            <label for="inputTeacherSubject"> Teacher's Name</label>
            <input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher"/>
        </div>
        <div class="form-group">
            <label for="inputScoreSubject"> Grade </label>
            <input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade"/>
        </div>
        <button type="button" class="btn btn-primary" ng-click="pushToArray() "> Submit your score!</button>
    </form>
</div>
<br><br><br>
<div class="container">
    <table class="table">
        <th ng-repeat="head in tableHeadings"> {{head}}</th>
        <tr ng-repeat="gr in grades track by $index" ></tr>
        <td > {{gr.name}}</td>
        <td>{{gr.teacher}}</td>
        <td> {{gr.score}}</td>
    </table>
</div>




 angular.module('myProjectApp')
    .controller('MainCtrl', function($scope) {
        $scope.grade = {};
        $scope.grades = [];
        $scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];

        $scope.pushToArray = function(){
            $scope.grades.push($scope.grade);
            console.log($scope.grades);
        }

    });