AngularJS: ng-class not refreshing when Bootstrap modal re-opens - angularjs

Question

I have a Bootstrap modal with a form inside a div set with ng-class:
<div id="modalNewOrder" class="modal fade" data-modalName="order" role="dialog" ng-controller="NewOrderController as NewOrderCtrl">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close pull-left" data-dismiss="modal">X</button>
<h4 class="modal-title">
New order
</h4>
</div>
<div class="modal-body">
<div ng-class="NewOrderCtrl.position">
<form>
// input text here
</form>
When the modal is loaded, its NewOrder.position sets its css to center. When the form is processed, NewOrder.position is updated to top, and the results of are shown below it.
Now the problem: I want NewOrder.position to be reset to center when the modal is re-opened. However, even if I reset NewOrder.position, it seems the ng-class is not being updated. How do I do that?
I'm using this on my controller, but its not working to update ng-class:
$("#modalNewOrder").on("hidden.bs.modal", function () {
$(this).find('form')[0].reset();
self.clearQuery();
self.position = "mycss-position-center";
});
***** UPDATE *****
Following Naren's suggestion and experimenting a little, I've updated my code. In my html I have:
<div ng-class="{'mycss-position-top' : NewOrderCtrl.top, 'mycss-position-center' : !NewOrderCtrl.top}">
and
<form ng-submit="processing()">
And in my controller, I have:
var self = this;
self.top = false;
$("#modalNewOrder").on('shown.bs.modal', function() {
self.top = false;
});
$("#modalNewOrder").on("hidden.bs.modal", function () {
self.top = false;
});
self.processing = function(){
self.top = true;
};
The problem now is that in the first re-opening of the modal, self.top is evaluated as "true", even if the "on show" function is processed and show "false" in console.log. Only if I close the modal again and re-open it once more, then it goes do false.
* UPDATE *
The proposed solution was working. I've found a syntax error in another place which was causing this last wrong behavior.

Answer 1

Final Answer:
Please don't use JQuery plugins in angular, angular does not detect the functions or variable changes. If you google the plugin name with angular (angular bootstrap) you will run into a library that enables you to use Bootstraps functionality with angular itself (angular UI Bootstrap). This is the proper way of writing code, If you use JQuery function, even if you solve and issue like this, you will run into another issue (because angular cannot detected the changes completely), Please do some research for a angular plugin before going with the Pure JQuery plugin approach.
JSFiddle Demo
Old Answer:
Why not always center the form as default and on form submit update the corresponding class.
HTML:
<div id="modalNewOrder" class="modal fade" data-modalName="order" role="dialog" ng-controller="NewOrderController as NewOrderCtrl">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close pull-left" data-dismiss="modal">X</button>
<h4 class="modal-title">
New order
</h4>
</div>
<div class="modal-body">
<div class="mycss-position-center" ng-class="{'mycss-position-top' : process}">
<form ng-submit="processing()">
// input text here
</form>
JS:
app.controller('NewOrderController', function($scope) {
$scope.process = false;
$scope.processing = function(){
$scope.process = true;
};
});

Answer 2

I thinks your ng-class is not initialisation when you call boostrap modal.
You can use watch syntax like that:
$scope.$watch(' NewOrder.position', function () {
$scope.NewOrder.position = "mycss-position-center";
}, true);
Some thing like that..