AngularJS: How to push data from bootstrap modal to table

Question

I have a bootstrap modal to input data, and when the Submit button get clicked I want to push the data into a bootstrap table. But nothing happens and I do not know why... This is my modal:

<div class="modal fade-scale" id="workExpModal" name="workExpModal"
    role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Work Experience</h4>
            </div>
            <div class="modal-body">
                <form action="" method="post" ng-submit="saveWorkExp()"
                    name="workExpForm">
                    <div class="form-group">
                        <label>Time:</label> <br>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="text" class="form-control" id="timeStart"
                                    placeholder="From: dd/MM/yyyy" ng-model="workExperience.From" />
                            </div>
                            <div class="col-md-6">
                                <input type="text" class="form-control" id="timeEnd"
                                    placeholder="To: dd/MM/yyyy" ng-model="workExperience.To" />
                            </div>
                        </div>
                        <br> <label>Title/Position:</label><br>
                        <div class="row">
                            <div class="col-md-12">
                                <input type="text" class="form-control" id="title"
                                    placeholder="Title/Position" ng-model="workExperience.Title">
                            </div>
                        </div>
                        <br> <label>Workplace/Company:</label><br>
                        <div class="row">
                            <div class="col-md-12">
                                <input type="text" class="form-control" id="workplace"
                                    placeholder="Workplace/Company"
                                    ng-model="workExperience.Workplace" />
                            </div>
                        </div>
                        <br> <label>Contact:</label><br>
                        <div class="row">
                            <div class="col-md-12">
                                <input type="text" class="form-control" id="contact"
                                    placeholder="Contact" ng-model="workExperience.Contact" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Submit</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

This is my table:

<div class="container page-header table-responsive">
    <h3>Work Experience</h3>
    <table class="table" id="tblWorkExp">
        <thead>
            <tr>
                <th>Time</th>
                <th>Title/Position</th>
                <th>Workplace/Company</th>
                <th>Contact</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="workexp in workexps">
                <td>{{workexp.From}} - {{workexp.To}}</td>
                <td>{{workexp.Title}}</td>
                <td>{{workexp.Workplace}}</td>
                <td>{{workexp.Contact}}</td>
            </tr>
        </tbody>
    </table>
</div>

And this is my function:

<script type="text/javascript">
    /* $(document).ready(function() {
        $(".modal").validator();
    }); */
    var app = angular.module('resumeApp', []);
    app.controller('resumeController', function($scope) {
        $scope.workexps = [];
        $scope.saveWorkExp = function() {
            $scope.workexps.push($scope.workExperience);
            delete $scope.workExperience;
            $('#workExpModal').modal('hide');
            $scope.workExpForm.$setPristine();
        }
    });
</script>

Can anyone help?

Answer 1

It seems that your not passing the new data in

ng-submit="saveWorkExp(workExperience)"

Use the below code

<div class="modal fade-scale" id="workExpModal" name="workExpModal"
    role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Work Experience</h4>
            </div>
            <div class="modal-body">
                <form action="" method="post" ng-submit="saveWorkExp(workExperience)"
                    name="workExpForm">
                    <div class="form-group">
                        <label>Time:</label> <br>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="text" class="form-control" id="timeStart"
                                    placeholder="From: dd/MM/yyyy" ng-model="workExperience.From" />
                            </div>
                            <div class="col-md-6">
                                <input type="text" class="form-control" id="timeEnd"
                                    placeholder="To: dd/MM/yyyy" ng-model="workExperience.To" />
                            </div>
                        </div>
                        <br> <label>Title/Position:</label><br>
                        <div class="row">
                            <div class="col-md-12">
                                <input type="text" class="form-control" id="title"
                                    placeholder="Title/Position" ng-model="workExperience.Title">
                            </div>
                        </div>
                        <br> <label>Workplace/Company:</label><br>
                        <div class="row">
                            <div class="col-md-12">
                                <input type="text" class="form-control" id="workplace"
                                    placeholder="Workplace/Company"
                                    ng-model="workExperience.Workplace" />
                            </div>
                        </div>
                        <br> <label>Contact:</label><br>
                        <div class="row">
                            <div class="col-md-12">
                                <input type="text" class="form-control" id="contact"
                                    placeholder="Contact" ng-model="workExperience.Contact" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Submit</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

and your modified controller will be

<script type="text/javascript">
    /* $(document).ready(function() {
        $(".modal").validator();
    }); */
    var app = angular.module('resumeApp', []);
    app.controller('resumeController', function($scope) {
        $scope.workexps = [];
        $scope.saveWorkExp = function(workExperience) {
            $scope.workexps.push(workExperience);
            delete $scope.workExperience;
            $('#workExpModal').modal('hide');
            $scope.workExpForm.$setPristine();
        }
    });
</script>