ng-submit won't work with turbolinks - ruby-on-rails

Question

I have a Rails app using Angular and ngResource to display the content of my "Order" model. Inside the Angular part of the app, I can add and delete objects and it works fine. Only if I navigate to the page through my website (using turbolinks) the "addOrder()" function won't work. The deleteOrder() function and all the rest works, though. I checked what's going on with several console.logs and test functions and discovered that only ng-submit doesn't seem to trigger the function.
This is what the essential parts of my code look like:
app.js
var app = angular.module('shop', ['ngResource']);
$(document).on('ready page:load', function() {
angular.bootstrap(document.body, ['shop'])
});
app.factory('models', ['$resource', function($resource){
...
}]);
app.controller('OrdersCtrl', ['$scope', 'models', function($scope, models){
...
$scope.addOrder = function(){
// doesn't work
...
};
$scope.deleteOrder = function(order){
// works
...
};
}])
index.html.erb
...
<form ng-submit="addOrder()">
<tr>
<td>
<input type="number" step="0.01" ng-model="newOrder.total" class="form-control">
</td>
<td>
<select ng-model="newOrder.product_id" class="form-control">
<option ng-repeat="product in products" value="{{product.id}}">{{product.name}}</option>
</select>
<?td>
<td>
<input type="submit" value="+" class="btn btn-success">
</td>
</tr>
</form>
...
<tr ng-repeat="order in orders | orderBy:'-id':reverse">
{{order.id}}
<button ng-click="deleteOrder(order)" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
</tr>
...
The fact that confuses me the most is, that seemingly only ng-submit doesn't work - but all the rest does.
EDIT: SOLUTION
So I did some more research and finally figured out that the problem had nothing to do with turbolinks, Angular or Rails. The problem was, that I couldn't have a form inside a table. That caused the DOM to generate a form closing tag right after the opening tag with none of the inputs inside.

Answer 1

I would try defining something like page:change as I guess that is the only part where turbolinks is not working.
$(document).on('ready page:load page:change', function() {});
Just my first guess on this

Answer 2

I found the solution myself.
So I did some more research and finally figured out that the problem had nothing to do with turbolinks, Angular or Rails. The problem was, that I couldn't have a form inside a table. That caused the DOM to generate a form closing tag right after the opening tag with none of the inputs inside.
So this code:
<form ng-submit="addOrder()">
<tr>
<td>
<input type="number" step="0.01" ng-model="newOrder.total" class="form-control">
</td>
<td>
<select ng-model="newOrder.product_id" class="form-control">
<option ng-repeat="product in products" value="{{product.id}}">{{product.name}}</option>
</select>
<?td>
<td>
<input type="submit" value="+" class="btn btn-success">
</td>
</tr>
</form>
would look like this in the DOM:
<form ng-submit="addOrder()"></form>
<tr>
<td>
<input type="number" step="0.01" ng-model="newOrder.total" class="form-control">
</td>
<td>
<select ng-model="newOrder.product_id" class="form-control">
<option ng-repeat="product in products" value="{{product.id}}">{{product.name}}</option>
</select>
<?td>
<td>
<input type="submit" value="+" class="btn btn-success">
</td>
</tr>