AngularJS: How to push data from bootstrap modal to table
<p>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:</p>

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

<p>This is my table:</p>

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

<p>And this is my function:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    /* $(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();
        }
    });
&lt;/script&gt;
</code></pre>

<p>Can anyone help?</p>